Advanced Search

Return to Snippet

Revision: 27537
at June 14, 2010 09:41 by stancox
Initial Code 
<html>
<body onload="CreateView('map', 'img.jpg', 856, 650)">

<div id="map" style="width:500px; height:500px;"></div>

<script type="text/javascript">
function CreateView(id, imgSrc, imgWidth, imgHeight) {
 var map = document.getElementById(id);
 map.style.background = 'url('+imgSrc+') no-repeat 0 0';
 map.onmousemove = function(e) {
   e = e || window.event;
   var divWidth = map.offsetWidth;
   var divHeight = map.offsetHeight;
   map.style.backgroundPosition =
     '-'+Math.floor(e.clientX/divWidth*(imgWidth-divWidth))+'px'
     +' -'+Math.floor(e.clientY/divHeight*(imgHeight-divHeight))+'px';
 }
}
</script>

</body>
</html>
Initial URL 
http://otvety.google.ru/otvety/thread?tid=14cc8f9581b38538
Initial Description 
Подскажите готовый скрипт скроллинга картинки:
есть большая картинка по ширине.

Начинаем вести курсор вправа - двигается вправо. Чем ближе к границе тем сильнее. При границе картинки натыкается
Аналогично влево.
Initial Title 
image scrolling by width
Initial Tags 
images
Initial Language 
JavaScript