Форум

Evgeniya · #1 (**permalink**) 25.02.2013, 10:09

Здравствуйте! На странице следующая структура: слева большой блок, а справа маленькие блоки с превью изображения. При клике на превью изображение исходного размера появляется в большом блоке слева. В этом блоке мы видим только часть изображения, а остальную часть можем смотреть, когда водим курсором внутри блока.
Вот код, который ловит событие .mousemove() и выполняет действия

$("#big_photo").mousemove(function(e) {
var offset = $(this).offset();
var relativeX = (e.pageX - offset.left);
var relativeY = (e.pageY - offset.top);

$("#big_photo img").css({"position":"relative","left":"-"+relativeX+"px","top":"-"+relativeY+"px"});
});

Все работает, но, когда я дохожу курсором до края блока, то я не вижу конец изображения. Оно показывается не полностью. В выражении с подсчетом координат мне нужно еще учитывать координаты самого изображения, но записать правильно у меня не получается. Если есть у кого идеи, скажите, пожалуйста. Буду благодарна! =)

рони · #2 (**permalink**) 25.02.2013, 21:32

Evgeniya,
вариант ...

<!DOCTYPE HTML>
<html>
<head>
  <title></title>
<meta charset="utf-8" />
<style type="text/css">
#big_photo{
  width: 200px;
  height: 100px;
  position:   absolute;
  overflow: hidden;
  left: 300px
}

#big_photo img{
  position:   relative;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
$("#big_photo").mousemove(function(e) {
 var offset = $(this).offset();
 var divW = $("#big_photo").outerWidth();
 var divH = $("#big_photo").outerHeight();
 var sW = ($("#big_photo img").outerWidth() - divW)/divW;
 var sH = ($("#big_photo img").outerHeight()- divH)/divH;
 var relativeX = (e.pageX - offset.left);
 var relativeY = (e.pageY - offset.top);
 $("#big_photo img").css({
					left: -(sW *relativeX)|0,
					top: -(sH*relativeY)|0
				});
 });
});
</script>
</head>
<body>
<div class="tags" id="big_photo"><img  src="http://if.mynet.com/93/3/58/1256714b.jpg" border="0" alt="" /></div>
<img  src="http://if.mynet.com/93/3/58/1256714b.jpg" border="0" alt="" width="200" />
</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript