Advanced Search

image scrolling by width

/ Published in: JavaScript
Save to your folder(s)
Подскажите готовый скрипт скроллинга картинки:
есть большая картинка по ширине.

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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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>

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.