在jQuery中實現鼠標移動的滾動

我想在jQuery中的鼠標移動上實現滾動。在jQuery中實現鼠標移動的滾動

滾動的目的是查看完整的圖像..它已出現莫代爾彈出窗口。

此圖像是Div的背景圖片。

我能夠使用jQuery在鼠標移動上上下移動圖像。但問題是在完成圖像滾動後，div的背景會繼續滾動事件。我必須阻止這種情況發生。

參考ü可以看到： -

http://zovi.com/california-dream-t-shirt-white--S123RNM84602#2

點擊大圖上，一個模式彈出出現。在滾動時，完整的圖像在沒有額外滾動的情況下被查看。

我正試圖做到這一點。在此先感謝..

這裏是我的代碼： -

完整的HTML

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <style> 
     .backdrop 
     { 
      position: relative; 
      height: 300px; /*could be anything really..*/ 
      width: 400px; /*could be anything really..*/ 
      border: 3px solid #6699ff; 
      background: url('image/TShirt/tshirtpicZoom1.jpg') 0 0 no-repeat; 

     } 

     .direction 
     { 
      position: absolute; 
      width: 50%; 
      height: 100%; 
     } 
     .top 
     { 
      left: 0; 
      top: 0; 
      width:100%; 

     } 
     .bottom 
     { 
      left: 0; 
      top: 50%; 
      width:100%; 
     } 
    </style> 
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> 
    <script> 
     $(function() { 
      var x = 0, 
     y = 0, 
     rate = 0, 
     maxspeed = 10; 
      var backdrop = $('.backdrop'); 

      $('.direction', backdrop).mousemove(function (e) { 
       var $this = $(this); 
       var top = $this.is('.top'); 

       if (top) { 
        var h = $this.height(); 
        rate = (h - e.pageY - $(this).offset().top + 1)/h; 
       } 
       else { 
        var h = $this.height(); 
        rate = -(e.pageY - $(this).offset().top + 1)/h; 
       } 
      }); 

      backdrop.hover(
     function() { 
      var scroller = setInterval(moveBackdrop, 10); 
      $(this).data('scroller', scroller); 
     }, 
     function() { 
      var scroller = $(this).data('scroller'); 
      clearInterval(scroller); 
     } 
    ); 

      function moveBackdrop() { 
       y += maxspeed * rate; 
       var newpos = x + 'px ' + y + 'px'; 

       backdrop.css('background-position', newpos); 
      } 
     }); 

    </script> 
</head> 
<body> 
    <div class="backdrop"> 
     <div class="direction top"> 
     </div> 
     <div class="direction bottom"> 
     </div> 
    </div> 
</body> 
</html>

來源

2012-10-16 Nayan

我得到了解決自己....

這裏就是我沒有...

拍一張假影像控制並將其隱藏起來

<img id="DummyImage" class="hidden" />

在調用模態彈出窗口之前，即在$('#BigImage')單擊事件之前，將圖像源分配給虛擬圖像控件。

也使y和速率值0

y = 0; 
rate = 0; 
$("#DummyImage").attr('src', imageSrc);

現在在鼠標移動事件即「moveImageZoomBox」功能使虛擬圖像控件可見並獲得圖像的高度。

在相同的鼠標移動事件採取變量爲「scrollmin」和「scrollmax」，然後

scrollmin=-(height of the image)

scrollmax=(height of the image)/2

現在應用條件的應該是「scrollmin」之間這樣的值，並'scrollmax'

'moveImageZoomBox'功能如下：

function moveImageZoomBox() { 
       y += maxspeed * rate; 
       var ScrollYMin = 0; 
       var ScrollYMax = 0; 
       var tths = this; 
       $("#DummyImage").show(); 

       ScrollYMin = -($("#DummyImage")[0].naturalHeight-300);//in order to stop scrolling whole image up 
       ScrollYMax = $("#DummyImage")[0].naturalHeight/2-200;//in order to stop scrolling whole image down 

       $("#DummyImage").hide(); 

       var newpos = x + ' ' + y + 'px'; 
       if (y > ScrollYMin && y < ScrollYMax) { 
        imageZoomBox.css('background-position', newpos); 
       } 
       else { 
        y -= maxspeed * rate; 
       } 
      }

來源

2012-10-17 06:40:20 Nayan

在jQuery中實現鼠標移動的滾動

回答

相關問題