height:指元素内容的高度 ,jQuery中的height()方法返回的就是这个高度。
clientHeight:内容高度+padding高度 ,jQuery中的innerHeight()方法返回的就是这个高度。
offsetHeight:内容高度+padding高度+边框宽度 ,jQuery中的outerHeight()方法返回的就是这个高度。
offsetLeft:如果父辈元素中有定位的元素,那么就返回距离当前元素最近的定位元素边缘的距离。
如果父辈元素中没有定位元素,那么就返回相对于body左边缘距离
scrollTop :元素里面内容滚出的距离
//onscroll滚动事件
demo.onscroll = function () {
console.log(demo.scrollTop);
};
封装方法页面滚出的距离
function scroll() {
return {
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
};
}
window.onscroll = function () {
//console.log(scroll().top);//输出页面被卷去的高度
console.log(scroll().top);
};
封装方法页面可视区域的大小
function client() {
return {
width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
};
}
//窗体大小发生改变的事件 onresize
window.onresize = function () {
var clientWidth = client().width;
console.log(clientWidth);
};
封装缓动动画
//让 任意对象 的 任意属性 变为任意的目标值
function animate(obj, json, fn) {//json attr, target
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var flag = true;
for (var k in json) {//json 属性名:属性值 k:json[k]
if (k === "opacity") {
var leader = getStyle(obj, k) * 100;
var target = json[k] * 100;
var step = (target - leader) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
obj.style[k] = leader / 100;
} else if (k === "zIndex") {
obj.style.zIndex = json[k];
} else {
var leader = parseInt(getStyle(obj, k)) || 0;
var target = json[k];
var step = (target - leader) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
obj.style[k] = leader + "px";
}
if (leader != target) {
flag = false;
}
}
if (flag) {
clearInterval(obj.timer);
if (fn) {
fn();
}
}
}, 15);
}
function getStyle(obj, attr) {
if (window.getComputedStyle) {
return window.getComputedStyle(obj, null)[attr];
} else {
return obj.currentStyle[attr];
}
}
封装匀速动画
网友评论