jquery垂直滾動鼠標滾輪

我有div包含圖像，我想上下滾動使用jquery mousewheel插件。不知道如何做到這一點，文件不是很有幫助，將不勝感激的任何建議。jquery垂直滾動鼠標滾輪

<div class="innerScroll" style="float:left;width:448px;height:500px; overflow:hidden;"> 
<div class="mediaPanel"><img src="media/poster_silence.jpg" alt="" /></div> 
<div class="mediaPanel"><img src="media/poster_comingsoon.jpg" alt="" /></div> 
<div class="mediaPanel"><img src="media/poster_comingsoon.jpg" alt="" /></div> 
<div class="mediaPanel"><img src="media/poster_comingsoon.jpg" alt="" /></div> 
<div class="mediaPanel"><img src="media/poster_comingsoon.jpg" alt="" /></div> 
<div class="mediaPanel"><img src="media/poster_comingsoon.jpg" alt="" /></div> 
<div class="mediaPanel"><img src="media/poster_comingsoon.jpg" alt="" /></div>

<script type="text/javascript">

$（ 'innerScroll'）。綁定（ '鼠標滾輪'，功能（事件，三角洲）{ 如果（DELTA> 0）{

}否則{

} }）;

來源

2010-09-19 NiseNise

我可以看到第一個問題是，你有'$（ 'innerScroll'）'這將僅拾取innerScroll元件，即'富'。你需要帶有* class * innerScroll的元素，所以它應該是'$（'。innerScroll'）' – 2013-04-15 10:03:22

如果你正在使用此文件jQuery_mousewheel_plugin.js

$('.innerScroll').mousewheel(function(event,delta){ 

    var media = $(this).find('.mediaPanel'); 
    if (delta > 0) { 
     media.css('top', parseInt(media.css('top'))+40); 
    } else { 
     media.css('top', parseInt(media.css('top'))-40); 
    }   
});

來源

2010-09-19 22:31:41 jcubic

謝謝，但它實際上並不適用於我的頁面沒有向上和向下滾動？ parseInt不打印div中的40px奇怪？ – NiseNise 2010-09-21 13:32:03

我把這裏的例子放在http://jcubic.pl/mousewheel.html中，並在'jsbin' http://jsbin.com/asucu3，它適用於Opera和Firefox，但不在Chrome上，不知道爲什麼。 – jcubic 2010-09-22 08:07:59

我注意到你有最外面的div設置爲溢出隱藏，刪除和添加的相對位置。然後在整個事物上添加一個div，並在其上面隱藏溢出。

然後，您可以：

if (delta > 0){$(this).css({"top":+=40,"bottom":-=40});} 
else{$(this).css({"top":-=40,"bottom":+=40});}

你需要一些邏輯，在頂部和底部停止它雖然。一個if語句，將包裝的高度與container.css（頂部）或.css（底部）進行比較。你必須去掉css屬性的「px」。

.css("bottom").substring(0,$("#image_container").css("bottom").indexOf("px")) <= 
(content_initial_height - slider_height))

來源

2011-03-11 22:38:06 AKnox

jquery垂直滾動鼠標滾輪

回答

相關問題