Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.02.2013, 08:09
Новичок на форуме
Отправить личное сообщение для Evgeniya Посмотреть профиль Найти все сообщения от Evgeniya
 
Регистрация: 10.07.2012
Сообщений: 1

Движение фотографии внутри блока
Здравствуйте! На странице следующая структура: слева большой блок, а справа маленькие блоки с превью изображения. При клике на превью изображение исходного размера появляется в большом блоке слева. В этом блоке мы видим только часть изображения, а остальную часть можем смотреть, когда водим курсором внутри блока.
Вот код, который ловит событие .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, 19:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,148

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Есть ли скрипт для move изображения внутри блока? allanmiln Элементы интерфейса 0 20.02.2013 16:56
Подскажите готовый javascript-плагин табы+скроллер внутри блока mikhailk Элементы интерфейса 4 24.10.2012 16:24
Перемещение скролла внутри блока DarkDiabolik Events/DOM/Window 7 23.06.2012 15:15
По клику на ссылку меняем содержимое внутри блока goooooch Общие вопросы Javascript 6 26.01.2011 14:25
Запереть скрипт внутри блока Vineg Events/DOM/Window 2 25.01.2011 02:16