advanced code snippet search

Posted By

stancox on 06/14/10


Tagged

images scrolls


Versions (?)

image scrolling by width

 / Published in: JavaScript
 

URL: http://otvety.google.ru/otvety/thread?tid=14cc8f9581b38538

Подскажите готовый скрипт скроллинга картинки: есть большая картинка по ширине.

Начинаем вести курсор вправа - двигается вправо. Чем ближе к границе тем сильнее. При границе картинки натыкается Аналогично влево.

Expand | Embed | Plain Text 
  1. <html>
  2. <body onload="CreateView('map', 'img.jpg', 856, 650)">
  3.  
  4. <div id="map" style="width:500px; height:500px;"></div>
  5.  
  6. <script type="text/javascript">
  7. function CreateView(id, imgSrc, imgWidth, imgHeight) {
  8.  var map = document.getElementById(id);
  9.  map.style.background = 'url('+imgSrc+') no-repeat 0 0';
  10.  map.onmousemove = function(e) {
  11.    e = e || window.event;
  12.    var divWidth = map.offsetWidth;
  13.    var divHeight = map.offsetHeight;
  14.    map.style.backgroundPosition =
  15.      '-'+Math.floor(e.clientX/divWidth*(imgWidth-divWidth))+'px'
  16.      +' -'+Math.floor(e.clientY/divHeight*(imgHeight-divHeight))+'px';
  17.  }
  18. }
  19. </script>
  20.  
  21. </body>
  22. </html>

Report this snippet  

You need to login to post a comment.