Показать сообщение отдельно
  #2 (permalink)  
Старый 25.02.2013, 20:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,366

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>
Ответить с цитированием