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

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

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

  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.