| |
|
|
| | Î÷åíü íàäî ïåðåäåëàòü ñêðèïò ïðÿìîóãîëüíîé ëóïû íà êðóãëóþ ëóïó.
<html>
<head>
<title>Óâåëè÷èòåëüíîå ñòåêëî</title>
<script type="text/javascript">
document.onmousemove = handlerMM;
function handlerMM(e)
{
var dx = 0;
var dy = 0;
var fact = 2;
var opp = 70;
var x = (e)?e.pageX:event.x;
var y = (e)?e.pageY:event.y;
dx = (e)?0:window.document.body.scrollLeft;
dy = (e)?0:window.document.body.scrollTop;
var x1 = (x + dx) * fact; // ëåâàÿ êðàé
var y1 = (y + dy) * fact; // âåðõíèé êðàé
var x2 = 2 * opp + (x + dx) * fact; // ïðàâûé êðàé
var y2 = 2 * opp + (y + dy) * fact; // íèæíèé êðàé
document.getElementById("glass").style.left = (x + dx) * (1 - fact);
document.getElementById("glass").style.top = (y + dy) * (1 - fact);
document.getElementById("glass").style.clip = "rect(" +y1 +"px," +x2 +"px," +y2 +"px,"+x1 +"px)";
}
</script>
</head>
<body>
<h5>Óâåëè÷èòåëüíîå ñòåêëî</h5>
<!-- Êàðòèíêà-èñòî÷íèê -->
<img id="pic" src="Forest Flowers.jpg" galleryimg = "no" width=320 style="position: absolute; top: 40px; left: 10px; border-style: none">
<!-- Ëóïà -->
<img id="glass" src="Forest Flowers.jpg" width=640 style="position: absolute; top: 40px; left: 10px; clip: rect(10px, 100px, 100px, 10px); border-style: none;">
<!-- äëÿ ñðàâíåíèÿ -->
<img src="Forest Flowers.jpg" width="320" height="240" style="position: absolute; top: 330px; left: 10px; border-style: none;">
</body>
</html>
Êòî ìîæåò ïîìîãèòå, î÷åíü íàäî. Ñðîêè âûõîäÿò. | |
| |
|
