我想使用鼠標位置垂直滾動圖像

Question

我一直在試圖修改水平滾動圖像的代碼。我想垂直滾動它。我根本不瞭解JQuery。在嘗試了幾個小時之後，我找不到任何方法來排除這個問題。任何人都可以在這方面幫助我。

繼承人整個代碼。

$(function() { 
 
    $(window).load(function() { 
 
    var $gal = $("#propertyThumbnails"), 
 
     galW = $gal.outerWidth(true), 
 
     galSW = $gal[0].scrollWidth, 
 
     wDiff = (galSW/galW) - 1, // widths difference ratio 
 
     mPadd = 60, // Mousemove Padding 
 
     damp = 20, // Mousemove response softness 
 
     mX = 0, // Real mouse position 
 
     mX2 = 0, // Modified mouse position 
 
     posX = 0, 
 
     mmAA = galW - (mPadd * 2), // The mousemove available area 
 
     mmAAr = (galW/mmAA); // get available mousemove fidderence ratio 
 
    $gal.mousemove(function(e) { 
 
     mX = e.pageX - $(this).parent().offset().left - this.offsetLeft; 
 
     mX2 = Math.min(Math.max(0, mX - mPadd), mmAA) * mmAAr; 
 
    }); 
 
    setInterval(function() { 
 
     posX += (mX2 - posX)/damp; // zeno's paradox equation "catching delay" \t 
 
     $gal.scrollLeft(posX * wDiff); 
 
    }, 10); 
 
    }); 
 
});

#parent { 
 
    position: relative; 
 
    margin: 0 auto; 
 
    width: 100%; 
 
    background: #ddd; 
 
} 
 
#propertyThumbnails { 
 
    position: relative; 
 
    overflow: hidden; 
 
    background: #444; 
 
    width: 100%; 
 
    white-space: nowrap; 
 
} 
 
#propertyThumbnails img { 
 
    vertical-align: middle; 
 
    display: inline; 
 
    margin-left: -4px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="parent"> 
 
    <div id="propertyThumbnails"> 
 
    <img src="http://placehold.it/1000x100" /> 
 
    </div> 
 
</div>

繼承人的演示：

http://jsbin.com/alokat/1/edit?html,css,js,output

我改變了腳本

$(function(){ 

    $(window).load(function(){ 

     var $gal = $("#propertyThumbnails"), 
      galW = $gal.outerHeight(true), 
      galSW = $gal[0].scrollHeight, 
      wDiff = (galSW/galW)-1, // widths difference ratio 
      mPadd = 60, // Mousemove Padding 
      damp = 20, // Mousemove response softness 
      mX  = 0, // Real mouse position 
      mX2 = 0, // Modified mouse position 
      posX = 0, 
      mmAA = galW-(mPadd*2), // The mousemove available area 
      mmAAr = (galW/mmAA); // get available mousemove fidderence ratio 

     $gal.mousemove(function(e) { 
      mX = e.pageY - $(this).parent().offset().top - this.offsetTop; 
      mX2 = Math.min(Math.max(0, mX-mPadd), mmAA) * mmAAr; 
     }); 

     setInterval(function(){ 
      posX += (mX2 - posX)/damp; // zeno's paradox equation "catching delay"  
      $gal.scrollTop(posX*wDiff); 
     }, 10); 

    }); 

}); 

Answer 1

你是相當正面跟你的JavaScript修改，但你也需要改變樣式表一點，以適應新的行爲：

CSS

#propertyThumbnails img { 
    display: block; 
    /* ... */ 
} 

Working example on JSFiddle.

這個小變化將使代替下一個對方（inline elements）瀏覽器的地方圖像下面的每個其他（block-level elements）。

另外值得注意的是在JavaScript部分中更改的初始化。

Answer 2

您需要定義滾動/溢出的方向。以下是你需要做出改變：

CSS

#propertyThumbnails { 
    position: relative; 
    overflow-y: scroll; // or just overflow:auto; should also work 
    background: #444; 
    width: 100%; 
    white-space: nowrap; 
}