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垂直滚动鼠标滚轮

回答

相关问题