jQuery 鼠标滚轮插件应用 mousewheel

最新推荐文章于 2020-05-31 21:50:41 发布
最新推荐文章于 2020-05-31 21:50:41 发布
阅读量92 收藏
点赞数
文章标签： javascript ViewUI

jQuery Mousewheel Plugin,用于添加跨浏览器的鼠标滚轮支持。

mousewheel事件的处理函数有一点小小的变化，它除了第一个参数event 外，还接收到第二个参数delta。

通过参数delta可以获取鼠标滚轮的方向和速度。

如果delta的值是负的即-1，那么滚轮就是向下滚动，正的1就是向上。

weixin_33794672
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery 鼠标滚轮插件 mousewheel
04-27
1.使用方法很简单，仅仅把mousewheel绑定到指定元素上。示例代码如下： // using on $('#my_elem').on('mousewheel', function(event) { console.log(event.deltaX, event.deltaY, event.deltaFactor); }); // using the event helper $('#my_elem').mousewheel(function(event) { console.log(event.deltaX, event.deltaY, event.deltaFactor); }); 2.它提供了两个很有帮助事件mousewheel和unmousewheel来封装了滚轮的事件：使用方法如下： //绑定mousewheel事件 $('#my_elem').on('mousewheel', function(event) { console.log(event.deltaX, event.deltaY, event.deltaFactor); }); //解除mousewheel事件 $('#my_elem').unmousewheel(fn) 3.阻止事件冒泡，如果只想在某个元素上捕捉事件，而不想冒泡到document上，这样浏览器的滚动条就不会发生滚动了。事件代码如下： //阻止冒泡 $('#my_elem').on('mousewheel', function(event) { console.log(event.deltaX, event.deltaY, event.deltaFactor); return false; }); 4.获取滚动的方向,示例代码如下： if (delta > 0) o += ' up (' + delta + ')'; else if (delta 0) o += ' north (' + event.deltaY + ')'; else if (event.deltaY 0) o += ' east (' + event.deltaX + ')'; else if (event.deltaX < 0) o += ' west (' + event.deltaX + ')'; 5.可以通过event.deltaFactor获取滚动的距离，代码如下： $('#my_elem').on('mousewheel', function(event) { console.log(event.deltaFactor); return false; });
鼠标滚轮插件jQuery mousewheel
dxh_0829的专栏
06-05 1951
delta的值是负的即-1，那么滚轮就是向下滚动，正的1就是向上。 插件方法： 1.为了监听滚轮事件，该插件引入了mousewheel事件，所以我们可以监听元素的mousewheel事件 2.该插件还提供了元素快捷方法mousewheel和unmousewheel用于监听和去掉元素对鼠标滚轮事件支持 $(document) .mous
jquery 滚轮插件 jquery.mousewheel.js
DevOps海洋的渔夫@专栏
05-01 1450
jquery.mousewheel插件使用 jquery中没有鼠标滚轮事件，那么可以使用jquery的滚轮事件插件jquery.mousewheel.js。 Github地址:jquery-mousewheel 下载jquery.mousewheel的js文件 访问Github之后，主要jquery需要用到这两个js文件。 那么先将项目git clone下来。 ...
jquery鼠标滚轮事件支持插件
01-23
-- 引入鼠标滚轮插件 --> $(document).ready(function() { $('#yourElement').on('mousewheel', function(event) { if (event.deltaY > 0) { // 向下滚动 console.log('向下滚动'); } else { // 向上滚动 ...
jquery -mousewheel 鼠标滚动插件
01-08
总之，`jQuery Mousewheel`插件为网页开发提供了强大的鼠标滚轮事件处理能力，使开发者能够轻松创建各种创新的滚动交互效果，提升用户体验。通过熟练掌握和运用这个插件，你可以为你的网站或应用增添更多的交互性和...
jquery-mousewheel:浏览器的鼠标滚轮支持
06-03
//引用鼠标滚轮插件 require('jquery-mousewheel'); // using bind $('#my_elem').bind('mousewheel', function(event, delta, deltaX, deltaY) { if (window.console && console.log) { console.log(delta, ...
jquery mousewheel.js兼容高版本jq
07-16
鼠标滚动插件，兼容jquery1.8.0以上，可用于轮播图的滚动事件，直接调用mousewheel方法即可
pd-mousewheel-plugin:用于读取鼠标滚轮的Pure Data的GUI插件
04-29
pd-mousewheel-plugin 用于读取鼠标滚轮的Pure Data的GUI插件 安装 将mousewheel文件夹和mousewheel-plugin.tcl文件移动到Pd外部设备的标准位置。 如果您不确定外部设备在哪里，请参见此处： : 用 打开Pd并创建一个[mousewheel]对象。 打开帮助文件以查看其运行情况。 MouseWheel数据将发送到[r mousewheel]对象。 它只输出方向，而不是绝对位置； 也就是说，1表示向上，-1表示向下（在Windows上为120 / -120）。 [mousewheel]对象是带有计数器的简单抽象，用于收集和迭代鼠标滚轮数据。 笔记 我相信此插件会覆盖默认的滚动条行为，该行为使您可以在画布上滚动。 测试与兼容性 在Linux上可以工作在OSX上可以工作在Windows上我还没有测试过，但是大概应该可以用...
jQuery Mousewheel 基本使用
u013590356的专栏
02-08 9411
jQuery Mousewheel提供了对鼠标滚轮事件的支持。 现对其基本使用做简单介绍。具体参考以下代码： $(document).ready(function(){ $("div").mousewheel(function(event,delta){ //鼠标位置信息 $("span").append("event.pageX="+event.pageX +"");
jQuery 鼠标滚轮插件 jquery.mousewheel.js的基本使用
flame_007的博客
02-13 5881
jquery.mousewheel.js 是一个用于添加跨浏览器的鼠标滚轮支持的 jQuery 插件。 一、使用该插件，需要把 mousewheel 事件绑定到一个元素上即可。当然也可以使用类似 jQuery 中其他的事件方法写法。 例如： // 方式1：using on $('#某个元素').on('mousewheel', function(event) {     console.l...
【HTML5】Mousewheel全解（集合贴）
weixin_33709590的博客
11-18 410
为什么80%的码农都做不了架构师？>>> ...
jquery的鼠标滚轮插件 Mousewheel响应跨浏览器的鼠标滚轮事件
Waitforsniping的专栏
01-06 3764
jquery插件默认是不支持鼠标中轮滚轮事件的，现在我们可以用于添加跨浏览器的鼠标滚轮支持可以使用jquery的Mousewheel插件。   使用mousewheel事件有以下两种方式：   使用mousewheel和unmousewheel事件函数； 使用经典的bind和unbind函数。 $('div.mousewheel_example').mousewheel(fn
vue中引入mousewheel事件及其兼容性处理
热门推荐
github_39532240的博客
12-15 1万+
项目实现过程中需要对一个已经有纵向滚动条的table表格增加鼠标滚轮（mousewheel）事件，方便查看数据；其实现原理与我上一篇博客中的拖动事件类似，利用模拟出来的同一个滚动条来实现，滚动条设置的要点在于：1、滚动条与滚动槽的高度比例 应该等于 内容区（动态变化）和可视区的高度比例；滚动槽与可视区平齐，高度一样，；滚动条的高度则根据内容的高度等比例计算；2、各元素的定位采用绝对定位，其父元素采
鼠标滚轮插件jquery.mousewheel.js的简单使用
C_755028787的博客
05-31 1161
jquery中没有鼠标滚轮事件，那么可以使用jquery的滚轮事件插件jquery.mousewheel.js。 jQuery鼠标滚轮插件是一个jQuery插件，添加了跨浏览器的鼠标滚轮支持和delta标准化。 GitHub主页：https://github.com/jquery/jquery-mousewheel 要使用这个插件，只需将mousewheel事件绑定到一个元素。 它还提供了两个辅助方法，分别称为mousewheel和unmousewheel，它们的作用与jQuery中的其他事件辅助方法一样。
关于scroll和mousewheel事件的问题
qq_30975339的博客
12-26 5521
需要注意的点： 火狐的鼠标滚轮事件是DOMMouseScroll 事件参数兼容：e=window.event||e;(下面省略) preventDefault()函数取消的是默认事件，不会把我们自己添加的事件处理删除 实验开始 在下面验证例子的基础上实验，实验之间代码没有干涉： 1.原样输出： 在元素内无论是手动拉动滚动条还是滚动鼠标滚轮，'d'都是无法出现的。而当元素滚动到达顶部或...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值