标签:句柄 anim -- node remove height on() lse set
//animate效果封装
// animation(".Odiv", "bounceInUp animated");
function animations(node,result,num) {
// node 节点名
// animated效果
var pageHeight,
rollHeight,
visibilityHeight = 0;
// pageHeight 浏览器高度---screen.height
// rollHeight 内容页被卷去的高度---scrollTop
// visibility 当前节点所在位置---offset().top
pageHeight = window.screen.height / 2 + num;
visibilityHeight = $(node).offset().top;
// console.log(pageHeight);
// console.log(visibilityHeight+"---offset");
// window.onscroll = function (e) {
// var e = e || window.event;
//window.onscroll 只能调用一次
//使用 $(window).scroll(function(){ 完美解决
$(window).scroll(function(){
rollHeight =
document.documentElement.scrollTop || document.body.scrollTop;
// console.log(rollHeight+"---scrollTop");
if (rollHeight > visibilityHeight - pageHeight) {
$(node)
.css({ opacity: "1" })
.addClass(result);
}
if(rollHeight < visibilityHeight - (pageHeight+num)){
$(node).css({ opacity: "0" }).removeClass(result);
//低于浏览器删除动画效果并消失等待下一次添加
}
});
}
//或者用这种方法也可以避免 window.onscroll 只调用一次
addEvent(window, ‘scroll‘, function () {
console.log(33)
});
function addEvent(obj, type, fn) {
if (obj.attachEvent) { //ie用来绑定脚本事件
obj.attachEvent(‘on‘ + type, function () {
fn.call(obj);
})
} else {
obj.addEventListener(type, fn, true);
//向指定元素添加事件句柄
//三个参数 event function useCapture
// event 必须 字符串 指定事件名
// function 必须 指定事件触发是要执行的函数
// useCapture 可选 布尔值 指定事件是否在捕获或在冒泡阶段执行
//true 是捕获
}
}
标签:句柄 anim -- node remove height on() lse set
原文地址:https://www.cnblogs.com/fearless427/p/9765584.html