鼠标滚轮事件&&计算标签到窗口的距离&&兄弟节点

2021-01-08  本文已影响0人  辘轳鹿鹿

1 鼠标滚轮事件

W3C浏览器: mousewheel      属性event.wheelDelta >0向上滚动
Foirefox: DOMMouseScroll  属性event.detail <0 向上滚动
JQuery中: event.originalEvent.wheelDelta就是指向原始的事件对象。
 
JQuery中兼容写法:
$(document).on("mousewheel DOMMouseScroll", function (e) { 
            
    //var delta = (event.originalEvent.wheelDelta) ? event.originalEvent.wheelDelta : -(event.originalEvent.detail || 0); //合并写法
var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) ||  // chrome & ie
        (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));              // firefox
    if (delta > 0) {
        // 向上滚
        console.log("wheelup");
    } else if (delta < 0) {
        // 向下滚
        console.log("wheeldown");
    }
});

2 计算标签到窗口的距离

一个html文档就像一幅图,html内容越多图越长;浏览网页时,就是透过透明的玻璃(视窗)在看这幅画。

获取视窗高度
var wh = $(window).height()
获取绑定元素上边框相对于文档顶端的偏移量
ot = $(".first").offset().top
获取滚动条在文档中的位置
ds =  $(document.documentElement).scrollTop()
获取标签高度
icoimg_h = $(".first").height();
计算元素底部到视窗底部的距离
你要的高度+$("div").height()+[$("div").offset().top-$(document).scrollTop()]=$(window).height();
firsttop = wh - icoimg_h - [ot -ds ];

3 滚轮触发事件

3.1 滚轮位置触发事件

 $(window).scroll(function()

3.2 滚轮滚动触发事件

$(document).on("mousewheel DOMMouseScroll", function (e) 

4 兄弟节点

jQuery.prev(),返回上一个兄弟节点,不是所有的兄弟节点
jQuery.prevAll(),返回所有之前的兄弟节点
jQuery.next(),返回下一个兄弟节点,不是所有的兄弟节点
jQuery.nextAll(),返回所有之后的兄弟节点
jQuery.siblings(),返回兄弟姐妹节点,不分前后

上一篇下一篇

猜你喜欢

热点阅读