jquery实现 鼠标滚轮上下滚动事件，

最新推荐文章于 2020-12-21 09:24:03 发布
最新推荐文章于 2020-12-21 09:24:03 发布
阅读量6.6k 收藏 2
点赞数 3
分类专栏： 前端开发 没事写着玩
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jyz18838957183/article/details/93640339
版权

不多说了 直接贴代码，由于滚动事件浏览器之间的 兼容性问题， Chorme 和Firefox 的兼容性需要同时兼并， 具体逻辑可以看本人代码逻辑。  有什么不明白的可以在下方留言！！！！

 

11111

Hello word!!!!
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
HTML中鼠标滚轮事件onmousewheel处理，高级前端面试题2024
m0_61044466的博客
04-01 282
其中经我测试，IE/Opera属于同一类型，使用attachEvent即可添加。/*IE注册事件*/Firefox使用添加滚轮事件/*Firefox注册事件*/新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。Safari与Chrome属于同一类型，可使用HTML DOM方式添加事件其中除Firefox外其余均可使用HTML DOM方式添加事件，因此添加事件使用以下方式/*注册事件*/
jQuery实现鼠标滚轮控制div上下翻动效果
06-10
打开页面后，用鼠标滚轮上下滚动时，发现页面并不会滚动，滚动的部分却是div里面的三部分，效果很不错 使用方法： 1、在你的网页head中引入css样式 2、将代码部分拷贝到你的网页中 3、在底部引入四个js即可搞定
jquery鼠标滚轮事件
05-13
jquery鼠标滚轮事件jquery鼠标滚轮事件jquery鼠标滚轮事件jquery鼠标滚轮事件jquery鼠标滚轮事件jquery鼠标滚轮事件jquery鼠标滚轮事件
jquery 页面滚动条回到顶部_jquery实现点击上移到顶部功能(转)
weixin_39709367的博客
12-21 594
---恢复内容开始---本文转载自W3CPLUS, jQuery制作go to top按钮每每看到网友Blog的页面底部或中间有一个按钮回到页面顶部，羡慕死人了，但自己就是做不出这样的效果。后来在google和baidu搜寻了一下，仔细思考，并不像当初想象的那么复杂。经过整理贴到blog中与大家一起分享一下。我们先来看看效果图吧：这个效果是“点我加到页面顶部”按钮在页面底部，当然还有一种效果就是这...
jQuery鼠标滚轮控制页面滑动代码
chenguaya7092的博客
03-25 76
dreamweaver免费视频教程： 51RGB Dreamweaver板块 加讨论群390180913入群即可参加周一至周五免费公开课并获得免费视频 绝对干货！ jQuery满屏雪花飞舞特效 代码下载地址： jQuery特效代码下载 官方公共号：...
判断页面鼠标滚动的方向
sun_nan_vip的博客
07-17 447
$(document).on("mousewheel DOMMouseScroll", function (e) { var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || // chrome & ie (e.originalE
jquery判断鼠标滚轴向上滚动还是向下滚动
kingbow的博客
08-01 2414
$(document).on("mousewheel DOMMouseScroll", function (e) { var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || // chrome & ie ...
基于jquery的滚动鼠标放大缩小图片效果
10-28
在这个例子中，我们利用jQuery来绑定鼠标滚轮事件，并根据滚轮的向上或向下滚动来放大或缩小图片。 在jQuery中，我们可以使用`.bind()`方法来绑定事件处理器。对于IE浏览器，我们需要监听`mousewheel`事件，而对于...
jQuery实现的自定义滚动条实例详解
01-19
本文实例讲述了jQuery实现的自定义滚动条。分享给大家供大家参考，具体如下： 可以自由的给滚动条定义背景，上下按钮，当然不仅仅是颜色，连图片当背景也可以。支持鼠标滚轮，点击滚动条滚轴定位，上下按钮久按加速...
基于jquery的实现可以用鼠标滚轮控制的图片滚动上下滚动效果.zip
11-10
基于jquery的实现可以用鼠标滚轮控制的图片滚动上下滚动效果.zip
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
10-24
本文给大家分享的是一款jQuery整屏（全屏）滚动插件网页特效，滚动鼠标滚轮整屏一屏滚动切换代码，可设置文字/图片绝对上下左右居中显示JS代码，时下最流行的jQuery全屏滚动插件！（兼容测试：IE6及以上、Firefox、...
jQuery支持鼠标滚动的时间轴
11-10
jQuery支持鼠标滚动的时间轴 jQuery支持鼠标滚动的时间轴 jQuery支持鼠标滚动的时间轴 jQuery支持鼠标滚动的时间轴
jquery监听鼠标滚轮事件+js监听滚轮事件
03-30
jquery监听鼠标滚轮事件+js监听滚轮事件， 两个例子，都可以通过！ 目前已测试 ie8 火狐，360
jqeury实现鼠标滚轮滚动无限极菜单
08-28
jqeury实现鼠标滚轮滚动无限极菜单，无限极菜自适应屏幕
JQuery 随鼠标滚动条滚动的div
03-17
NULL 博文链接：https://solodu.iteye.com/blog/574857
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处理滚动条事件
anxiang008的专栏
12-12 2895
当页面的滚动条上下移动时，飘浮广告随着滚动条的滚动而上移或者下移，要明白两点，第一：放广告的层最好采用绝对定位，它的位置应该随着滚动条的改变而上下移动，滚动条的滚动促发的是onscroll事件，广告条所在的层的top值就是滚动条的高度，具体代码如下： Insert title here $(function(){            $(window).scroll(f
4. 前端--jQuery滚动事件
weixin_45267102的博客
11-10 1000
文章目录前端--jQuery滚动事件1. 滚动事件实现广告跟随2. 小火箭返回最顶端3. 电梯导航☆☆☆ 前端–jQuery滚动事件 scroll() 滚动条事件 scrollLeft() 获取的是横向滚动的距离。 scrollTop() 获取的纵向滚动的距离。 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>jq滚动事件&
网页一次滚动一屏幕效果
仗剑天涯，从摘要开始
11-03 440
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <title></ti...
jquery liMarquee 实现表格上下滚动
最新发布
06-01
可以使用jquery liMarquee插件来实现表格上下滚动。 首先，在页面中引入jquery liMarquee插件的js和css文件： ```html <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/liMarquee/2.0.3/liMarquee.min.css"> <script src="https://cdn.bootcdn.net/ajax/libs/liMarquee/2.0.3/jquery.liMarquee.min.js"></script> ``` 然后，在表格外面包裹一个div，并设置其高度和样式： ```html <div id="marqueeWrapper" style="height: 200px;overflow: hidden;"> <table id="myTable"> <thead> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> </tr> </thead> <tbody> <tr> <td>内容1</td> <td>内容2</td> <td>内容3</td> </tr> <tr> <td>内容4</td> <td>内容5</td> <td>内容6</td> </tr> <!-- 其他行 --> </tbody> </table> </div> ``` 最后，在页面加载完成后，使用jquery liMarquee插件初始化表格： ```javascript $(function() { $('#myTable').liMarquee({ direction: 'up', // 滚动方向 scrollamount: 50, // 滚动速度 hoverstop: false, // 鼠标移入是否停止滚动 circular: true, // 是否循环滚动 drag: false, // 是否支持鼠标拖动 runshort: false // 内容不足一屏时是否滚动 }); }); ``` 这样就可以实现表格的上下滚动了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值