2

我有 div 包含我想使用 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').bind('mousewheel', function(event,delta){ if (delta > 0) {

} 别的 {

} });

4

2 回答 2

2

如果你使用这个文件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);
    }        
});

编辑：

这是旧答案，但刚刚让访问者访问了我上传的返回 404 的演示，所以我再次上传了代码，它不起作用，所以我对代码进行了一些修改，这是工作版本：

$(document).ready(function(){
    $('.innerScroll').mousewheel(function(event, delta){
        var self = $(this);
        var scrollTop = self.prop('scrollTop');
        if (delta < 0) {
            self.prop('scrollTop', scrollTop + 40);
        } else {
           self.prop('scrollTop', scrollTop - 40);
        }
    });
});

可以在我的一个开源项目中找到 jQuery 鼠标滚轮的副本，该项目位于 npm 上，可从 unpkg 访问：

https://unpkg.com/jquery.terminal/js/jquery.mousewheel-min.js

演示现在可以工作并且位于同一个地方：

https://jcubic.pl/mousewheel.html

于 2010-09-19T22:31:41.850 回答
1

我注意到您将最外层的 div 设置为溢出隐藏，删除它并添加相对位置。然后在整个事物周围添加一个 div，并在其上隐藏溢出。

那么你就可以：

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

不过，您需要一些逻辑来在顶部和底部停止它。if 语句将包装器的高度与 container.css(top) 或 .css(bottom) 进行比较。您也必须剥离 css 属性的“px”。

.css("bottom").substring(0,$("#image_container").css("bottom").indexOf("px")) <=
(content_initial_height - slider_height))
于 2011-03-11T22:38:06.917 回答