鼠标滚轮插件

在做视觉差幻灯片时,为了美观需要将滚动条隐藏掉,没有滚动条就无法出发scroll()事件,所以可以使用鼠标滚轮事件来代替。

使用原生的js鼠标滚轮事件会有兼容性问题,为jQuery也没有实现鼠标滚轮事件,有一款不错的jQuery插件可以弥补

文档https://github.com/jquery/jquery-mousewheel

实例:http://sandbox.runjs.cn/show/ifz4r8bx

核心代码:

$(‘body‘).bind(‘mousewheel‘,function(event){
                //三个属性
                //deltaX 不知道是干嘛的
                //deltaY 向下滚为-1,反之为+1
                //deltaFactor 应该是滚动的幅度,不同浏览器不相同
                 console.log(event.deltaX, event.deltaY, event.deltaFactor);
                 var _this = $(this),
                      top = _this.scrollTop() + event.deltaFactor*event.deltaY*-1;
                 _this.scrollTop(top);
});
时间: 2024-10-04 10:51:23

鼠标滚轮插件的相关文章

鼠标滚轮插件jQuery mousewheel

delta的值是负的即-1,那么滚轮就是向下滚动,正的1就是向上. 插件方法: 1.为了监听滚轮事件,该插件引入了mousewheel事件,所以我们可以监听元素的mousewheel事件 2.该插件还提供了元素快捷方法mousewheel和unmousewheel用于监听和去掉元素对鼠标滚轮事件支持 $(document) .mousewheel(function(event, delta) { loghandle(event, delta); }); //页面中滚动 $('#test6')  

jQuery 鼠标滚轮插件 jquery.mousewheel.js

jQuery Mousewheel Plugin,用于添加跨浏览器的鼠标滚轮支持.mousewheel事件的处理函数有一点小小的变化,它除了第一个参数event 外,还接收到第二个参数delta.通过参数delta可以获取鼠标滚轮的方向和速度.如果delta的值是负的即-1,那么滚轮就是向下滚动,正的1就是向上. 官方网址: https://github.com/brandonaaron/jquery-mousewheel 插件方法: 1.为了监听滚轮事件,该插件引入了mousewheel事件,

jquery 鼠标滚轮事件 插件 Mousewheel

jquery插件默认是不支持鼠标中轮滚轮事件的,现在我们可以用于添加跨浏览器的鼠标滚轮支持可以使用jquery的Mousewheel插件. 使用mousewheel事件有以下两种方式: 使用mousewheel和unmousewheel事件函数: 使用经典的bind和unbind函数. JavaScript Code复制内容到剪贴板 $('div.mousewheel_example').mousewheel(fn); $('div.mousewheel_example').bind('mous

鼠标滚轮事件MouseWheel

其实在大多数浏览器(IE6, IE7, IE8, Opera 10+, Safari 5+,Chrome)中,都提供了 "mousewheel" 事件.但杯具的是 Firefox 却不支持此事件,不过庆幸 Firefox  中提供了另外一个等同的事件:"DOMMouseScroll" . OK,我们现在已经知道了不同浏览器之间实现的差别,兼容代码如下: var addEvent = (function () { if (window.addEventListener

PCB Genesis 鼠标滚轮缩放与TGZ拖放 插件实现

一.背景: 做过CAM的人都用过Geneiss软件,由于处理资料强大,目前奥宝公司出品的Genesis占领整个PCB行业,整个行业无人不知呀, 而此软件有一个吐槽点Genesis 无滚轮缩放与TGZ拖放功,而用过其它图形编辑(CAD,3DMAX,Photoshop,UG)软件,鼠标对图形的操作 是非常的灵活的,确实没有对比就没有伤害,而奥宝这么多年来Genesis升级了N次也没有加入此功能. 正是如此,不得不自行开发此插件功能. <鼠标滚轮缩放>此作品是2014年写使用易语言写的,但有一些坑没

基于jQuery鼠标滚轮滑动到页面节点部分

基于jQuery鼠标滚轮滑动到页面节点部分.这是一款基于jQuery+CSS3实现的使用鼠标滚轮或者手势滑动到页面节点部分特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <section class="panel home" data-section-name="home"> <div class="inner"> <header> <h1></h1> <

浅谈鼠标滚轮事件

现在的网页设计越来越高大上,效果越来越炫酷毙.一些浏览器的默认东西都被纷纷嫌弃,取而代之的是各种酷炫拽的模拟组件.就好像之前说过的视差滚动,又好像各种小清新的模拟滚动条,都有共同的事件:滚轮事件. 正如大家所知道的那样,jquery框架默认是不支持鼠标中轮滚轮事件的.要实现不同浏览器之间的滚轮事件,我们不能不说一下这个js组件了:jquery.mousewheel.js. 什么都不说,先上源码: /*! Copyright (c) 2013 Brandon Aaron (http://brand

jQuery 3D圆盘旋转焦点图 支持鼠标滚轮

之前我们分享过很多炫酷实用的jQuery焦点图插件了,今天介绍的这款jQuery焦点图非常特别,所有图片围成一个圆圈,组成一个立体视觉的圆盘,并且可以旋转选择圆盘中的图片.另外,这款jQuery 3D圆盘旋转焦点图插件还支持鼠标滚轮,可以让你更方便地浏览图片. 在线演示源码下载 接下来分析一下实现这款jQuery 3D焦点图的具体过程和源代码,代码主要由HTML.CSS以及jQuery组成,由于JS的参与,相对比较复杂. HTML代码: <ul id="carousel">

鼠标滚轮事件

由于浏览器的不同,对鼠标滚轮事件也有所不同,大致可分为DOMMouseScroll 和onmousewheel两类 1.第一类是Firefox支持的DOMMouseScroll事件,此事件必须以addEventListener来绑定,当鼠标滚轮上下滚动时 ev.detail向上为-3,向下为3. 2.第二类是IE/chrome支持的onmousewheel事件,当鼠标滚轮上下滚动时 ev.wheelDelta向上为120,向下为-120.