js中的链式运动总结
<script>
window.onload = function() {
var oDiv1 = document.getElementById('div1');
oDiv1.onclick = function() {
startMove(this, {
width : 200
}, 10, function() {
startMove(this, {
height : 200
}, 10);
});
}//封装一个运动函数
function startMove(obj, json, iSpeed, fn) {
clearInterval(obj.iTimer);
var iCur = 0;
obj.iTimer = setInterval(function() {
var iBtn = true;
for ( var attr in json ) {
var iTarget = json[attr];
if (attr == 'opacity') {
iCur = Math.round(css( obj, 'opacity' ) * 100);//由于小数精度的问题(即两个小数相加得到的并不是准确的数值)所以在透明度的设置中我们一般选择的范围是0到100
} else {
iCur = parseInt(css(obj, attr));
}
if (iCur != iTarget) {
iBtn = false;//设置开关,当对象的属性值没有达到目标值的时候,不能清除定时器
if (attr == 'opacity') {
obj.style.opacity = (iCur + iSpeed) / 100;//标准浏览器下
obj.style.filter = 'alpha(opacity='+ (iCur + iSpeed) +')';//非标准IE浏览器下
} else {
obj.style[attr] = iCur + iSpeed + 'px';
}
}
}
if (iBtn) {
clearInterval(obj.iTimer);
fn && fn.call(obj);//利用call方法改变函数中this的指向问题
}
}, 30);
}
function css(obj, attr) {//封装了一个获取对象属性值的兼容函数
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
}
</script>