700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > jQuery监听鼠标滚轮事件

jQuery监听鼠标滚轮事件

时间:2019-03-15 23:08:41

相关推荐

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);});

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。