jquery动画水平滚动鼠标滚动事件

时间:2013-04-15 16:36:55

标签: jquery css html horizontal-scrolling mousewheel

mousescroll事件中,我一直在研究div的动画水平偏移。 这是我到目前为止所做的事情的链接,有人能看到我做错了吗?

动画发生在我需要mousescroll相同的点击动作上。 http://jsfiddle.net/laksdesign/WvRR6/

jQuery(document).ready(function($) {

    $(".scroll").click(function(event) {
        event.preventDefault();
        $('#wrapper').animate({ scrollLeft: $('#wrapper').scrollLeft() + $(this.hash).offset().left }, 800);
    });

    $('body').bind('mousewheel', function(scroll){
        if(scroll.originalEvent.wheelDelta /120 > 0) {
            scroll.preventDefault();
            $('#wrapper').animate({ scrollLeft: $('#wrapper').scrollLeft() + $(this.hash).offset().left }, 800);
        } else{

        }
    });
});

我根据mousescroll拍摄动画的另一个参考是: http://jsfiddle.net/laksdesign/EATaU/

1 个答案:

答案 0 :(得分:1)

为了在jQuery中捕获mousescroll事件,您需要使用插件或一些外部函数。我建议使用插件而不是重新发明轮子。请注意,在您提供的引用中,如何使用mousewheel.js文件 - 这是您需要使用的插件。

有关如何使用插件的更多信息,请参阅this answer

您可以使用的示例插件:

  • BrandonAaron.com - 我不允许链接到此网站,因此请改为使用Google。

你可以这样使用插件:

// using bind
$('#my_elem').bind('mousewheel', function(event, delta) {
    console.log(delta);
});

正如上面评论中建议的用户@Dom,另一个广泛使用的插件是: