Question

我有div包含我想使用jquery mousewheel插件上下滚动的图像。不知道如何做到这一点，文档不是很有帮助，将不胜感激任何建议。

<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'）。bind（'mousewheel'，function（event，delta）{ if（delta> 0）{

}其他{

} }）;

Answer 1

如果您使用此文件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);
    }        
});

Answer 2

我注意到你将最外层的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))

jquery垂直滚动与鼠标滚轮

2 个答案: