DOM

特效"三大家族":

offset  偏移

scroll   滚动

client   可视区

 

offset家族:

offsetWidth和style.width的区别:

style.width只能获取行内式,offsetWidth不管行内还是内嵌都能获取

style.width是字符串,带px,offsetWidth是数字

style.width能设置行内样式,offsetWidth是只读属性,不能设置样式

offsetWidth,offsetHeight是由width,padding,border组成的

 

offsetLeft:自己左边框距离定位的父盒子的padding之间的距离 ,如果没有定位的父盒,默认以body或是文档为准

如果父盒子有定位,就是到父盒子左内边框的距离

offsetTop:自己上边框距离定位的父盒子的padding之间的距离 ,如果没有定位的父盒,默认以body或是文档为准

没有offsetRight和offsetBottom

offsetParent如果父元素有定位,那么offsetParent就是定位的父元素,如果父元素没有定位,offsetParent就是body

parent永远指的是上一级元素

 

scroll家族

scrollWidth是指width+padding,获取的是盒子撑开后的大小

scrollTop是指滚动出盒子的距离

获取页面滚动出去的距离:

谷歌,火狐,IE9及以上版本支持document.body.scrollTop

IE8及以下版本支持document.documentElement.scrollTop

为了兼容所有版本,需要进行封装函数:

函数的作用:获取scrollTop和scrollLeft
function scroll() {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;;
var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;

var o = {
scrollTop : scrollTop,
scrollLeft : scrollLeft
};
return o;
}
再进行简写
function scroll() {

return {
scrollLeft:document.body.scrollLeft || document.documentElement.scrollLeft,
scrollTop:document.body.scrollTop || document.documentElement.scrollTop
};
}


谷歌,火狐,IE9及以上版本支持getComputedStyle 返回的类型是样式对象CSSStyleDeclaration

(window.getComputedStyle(box, null)["width"])||0; 为了避免动画运行错误,此处运用短路运算原理,输出前面的数字,或者0

IE8及以下版本支持currentStyle

 

 

box.currentStyle["width"]

封装兼容性函数:
function getStyle(element, attr) {
if(window.getComputedStyle) {
return window.getComputedStyle(element,null)[attr];
}else{
return element.currentStyle[attr];
}
}


动画的函数(除了zindex和透明度不适用)
function animate(element, attrs, fn) {
//清除定时器
if(element.timerId) {
clearInterval(element.timerId);
}

element.timerId = setInterval(function () {

//问题:当多个属性的最小值到达之后,动画就会停止
//解决:当所有属性都到达目标值,动画停止

//假设所有的属性都到达目标值,停止定时器
var isStop = true;

//遍历多个属性
for(var attr in attrs) {

if(attr === "zIndex") {
element.style[attr] = attrs[attr];
}else if(attr === "opacity") {
//获取当前元素样式属性的值
var current = parseFloat(getStyle(element, attr)) || 0;
current *= 100;
//每一次step的值会越来越小
var step = (attrs[attr]*100 - current)/8;

//正数 向上取整 负数 向下取整
step = step > 0 ? Math.ceil(step): Math.floor(step);

current += step;


element.style[attr] = current/100;
//更改ie下的透明度
element.style.filter = "alpha(opacity="+ current +")";

//如果有一个属性没有到达目标值,不能停止动画
if(step != 0) {
isStop = false;
}
}else{
//获取当前元素样式属性的值
var current = parseInt(getStyle(element, attr)) || 0;
//每一次step的值会越来越小
var step = (attrs[attr] - current)/8;

//正数 向上取整 负数 向下取整
step = step > 0 ? Math.ceil(step): Math.floor(step);

current += step;


element.style[attr] = current + "px";


//如果有一个属性没有到达目标值,不能停止动画
if(step != 0) {
isStop = false;
}
}

}

//停止定时器
if(isStop) {
clearInterval(element.timerId);

//执行回调函数
if(fn){
fn();
}
}
},30);
}



当先执行一个属性变化,再执行下一个时,可以使用函数的回调
btn.onclick = function () {

animate(box, {width:50}, function () {
//回调函数
animate(box, {left:200}, function () {
//回调函数
animate(box, {height: 400});
});
});
}


封装透明度和zindex动画特效的函数:
盒子的css
#box {
width: 200px;
height: 200px;
background-color: #ff0000;
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}

<script>
var btn = my$("btn");
btn.onclick = function () {
var box = my$("box");
animate(box, {opacity: 1});
}


//获取任意样式
function getStyle(element, attr) {
if(window.getComputedStyle) {
return window.getComputedStyle(element,null)[attr];
}else{
return element.currentStyle[attr];
}
}


//width : 400
//left : 300

//在修改单个属性的基础上修改
//1 修改参数,传入对象
//2 遍历对象,获取到所有的属性
//3 把target修改 成 attrs[attr]
function animate(element, attrs, fn) {
//清除定时器
if(element.timerId) {
clearInterval(element.timerId);
}

element.timerId = setInterval(function () {

//问题:当多个属性的最小值到达之后,动画就会停止
//解决:当所有属性都到达目标值,动画停止

//假设所有的属性都到达目标值,停止定时器
var isStop = true;

//遍历多个属性
for(var attr in attrs) {

if(attr === "zIndex") {
element.style[attr] = attrs[attr];
}else if(attr === "opacity") {
//获取当前元素样式属性的值
var current = parseFloat(getStyle(element, attr)) || 0;
current *= 100;
//每一次step的值会越来越小
var step = (attrs[attr]*100 - current)/8;

//正数 向上取整 负数 向下取整
step = step > 0 ? Math.ceil(step): Math.floor(step);

current += step;


element.style[attr] = current/100;
//更改ie下的透明度
element.style.filter = "alpha(opacity="+ current +")";

//如果有一个属性没有到达目标值,不能停止动画
if(step != 0) {
isStop = false;
}
}else{
//获取当前元素样式属性的值
var current = parseInt(getStyle(element, attr)) || 0;
//每一次step的值会越来越小
var step = (attrs[attr] - current)/8;

//正数 向上取整 负数 向下取整
step = step > 0 ? Math.ceil(step): Math.floor(step);

current += step;


element.style[attr] = current + "px";


//如果有一个属性没有到达目标值,不能停止动画
if(step != 0) {
isStop = false;
}
}

}

//停止定时器
if(isStop) {
clearInterval(element.timerId);

//执行回调函数
if(fn){
fn();
}
}
},30);
}


</script>

 

posted @ 2016-08-14 23:20  程序猿1990  阅读(147)  评论(0编辑  收藏  举报