鼠标滚轮事件&&计算标签到窗口的距离&&兄弟节点
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(),返回兄弟姐妹节点,不分前后