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

标签 jquery css html horizontal-scrolling mousewheel

我一直在为 div,在 mousescroll 事件上制作动画水平偏移。 这是我到目前为止所做的链接,有人可以看到我做错了什么吗?

动画发生在点击 Action 上,我需要同样的鼠标滚动。 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/

最佳答案

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

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

您可以使用的示例插件:

  • > BrandonAaron.com - 我不允许链接到该网站,所以请谷歌搜索。

您可以这样使用插件:

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

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

关于鼠标滚动事件上的jquery动画水平滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16020341/

相关文章:

javascript - 如何通过 css 或 javascript 甚至使用 jquery 在 html 中扩展悬停的缩写词?

html - 如何将下拉列表和表格元素放在页面的中心?

javascript - jQuery 1.11.1 appendChild 错误 IE8(意外调用方法或属性访问)

php - 更新网页的特定区域而不重新加载整个页面

php - 带有 float 文本和不对称边的自定义菜单

html - 如何为一个占位符设置不同样式的每个句子

javascript - 完成密码后隐藏一个div

javascript - 使用 jQuery,是否可以在所有浏览器的新选项卡中打开文件?

html - 菜单左右浮动

jquery - Bootstrap 中的 3 级下拉菜单