Показать сообщение отдельно
  #1 (permalink)  
Старый 13.05.2009, 16:25
Новичок на форуме
Отправить личное сообщение для Весёлый Мишка Посмотреть профиль Найти все сообщения от Весёлый Мишка
 
Регистрация: 13.05.2009
Сообщений: 6

Эффект Лупа на JavaScript
Помогите переделать работающий скрипт прямоугольной лупы, на круглую.

<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>

Очень надо, сроки поджимают.
Ответить с цитированием