jQuery监听鼠标滚轮事件

jQuery监听鼠标滚轮事件，通过鼠标滚轮可以做一些逻辑。
这里写了鼠标滚轮滚动控制元素的top值，实现鼠标滚轮滚动元素上下滚动。

html代码大致如下(主要是js代码)

<div id="table0" style="height: 500px; width: 500px;"><div id="tableCon" style="height: 1500px; width: 500px;">内容</div>
</div>

js代码：

$('#table0').css('position', 'relative');
$('#tableCon').css({ 'position': 'absolute', 'top': '0' });
$('#tableCon').on("mousewheel DOMMouseScroll", function (e) {var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) ||  // chrome & ie(e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));              // firefox// 获取事件发生时元素的top值var topnum = Number($('#tableCon')[0].style.top.replace('px', ''))// 存放应该设置的元素的top值var topStr = '';if (delta > 0) {// 向上滚if (topnum + 20 >= 0) {topStr = '0px';} else {topStr = topnum + 20 + 'px';}} else if (delta < 0) {// 向下滚if (topnum - 20 <= -1000) {topStr = '-1000px';} else {topStr = topnum - 20 + 'px';}}$('#tableCon').css('top', topStr);
});

jQuery监听鼠标滚轮事件相关推荐

综合设计一个OPPE主页--页面的插件引用（animate.css）--d动画的使用--滚轮或鼠标到该位置时，才有动画的切换---所以我们需要用jquery监听鼠标滚轮的滚动事件
Animate.css | A cross-browser library of CSS animations. 里面有许多css的效果首先使用 animate.css文件 link rel=&qu ...
html鼠标滚轮监听,javascript监听鼠标滚轮事件浅析
我们都见到过这些效果,用鼠标滚轮实现某个表单内的数字增加减少操作,或者滚轮控制某个按钮的左右,上下滚动.这些都是通过js对鼠标滚轮的事件监听来实现的.今天这里介绍的是一点简单的js对于鼠标滚轮事件的监 ...
Java怎么监听鼠标滑轮的转向_javascript监听鼠标滚轮事件浅析
我们都见到过这些效果,用鼠标滚轮实现某个表单内的数字增加减少操作,或者滚轮控制某个按钮的左右,上下滚动.这些都是通过js对鼠标滚轮的事件监听来实现的.今天这里介绍的是一点简单的js对于鼠标滚轮事件的监 ...
js监听鼠标滚轮事件
兼容写法:/Chrome/IE/Opera window.onmousewheel=document.onmousewheel=(e)=>{if(e.wheelDelta<0){conso ...
jquery监听窗口大小改变事件jquery.resizeend
方法一: $(function(){// Bind the resize event. When any test element's size changes, update its// corre ...
python pyhook监听扫码_Python——pyHook监听鼠标键盘事件
pyHook包为Windows中的全局鼠标和键盘事件提供回调. 底层C库报告的信息包括事件的时间,事件发生的窗口名称,事件的值,任何键盘修饰符等. 而正常工作需要pythoncom等操作系统的API的 ...
js监听鼠标拖动事件(按住左键拖动触发，松开左键取消)
此段代码,实现了左键点击id元素内区域后,拖动鼠标到边缘区域滚动条(内部class元素的滚动条)自动滚动,松开鼠标后取消事件业务需要记录一下 $(function () {var div=docum ...
JS监听鼠标滑轮事件
上才艺 var box = document.getElementById('box');function onMouseWheel(ev) {var ev = ev || window.event; ...
html屏幕滚动事件监听,JQuery监听页面滚动事件
1.当前滚动的地方的窗口顶端到整个页面顶端的距离: var scrollTop = $(window).scrollTop(); 2.获取指定元素的页面位置: $(obj).offset().top; ...
监听鼠标滚动条事件
window.addEventListener("scroll", this.handleScroll, true); //监听滚动事件handleScroll() {const ...

jQuery监听鼠标滚轮事件

jQuery监听鼠标滚轮事件相关推荐

最新文章

热门文章