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

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

作者: 辘轳鹿鹿 | 来源:发表于2021-01-08 15:17 被阅读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(),返回兄弟姐妹节点,不分前后

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/iacfaktx.html