实现函数
/*
* 多物体链式运动，多值同时运动
*/
function startMove(obj, json, callback){
clearInterval(obj.timer);
var iSpeed, iCur;
obj.timer = setInterval(function(){
var stopFlag = true;
for(var attr in json) {
if(attr == 'opacity') { //透明度需要单独设定，因为它的范围是0~1，而且没有单位
iCur = parseFloat( getStyle(obj, 'opacity') ) * 100;
} else {
iCur = parseInt( getStyle(obj, attr) );
}
iSpeed = (json[attr] - iCur) / 7; //缓冲运动
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if(attr == 'opacity') {
obj.style.opacity = (iCur+iSpeed) / 100;
} else {
obj.style[attr] = iCur + iSpeed + 'px';
}
if(iCur != json[attr]) {
stopFlag = false;
}
}
if(stopFlag) { //当所有属性都达到目标值时
clearInterval(obj.timer); //清除定时器
callback && callback(); //调用回掉函数
}
}, 30);
}所调用的getStyle函数
//获取样式属性值
function getStyle(obj, attr) {
if(obj.currentStyle) { //兼容IE
return obj.currentStyle[attr];
} else {
return window.getComputedStyle(obj,false)[attr];
}
}HTML部分，需要将上面两个函数添加进去
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
div{
position: absolute;
left: 0px;
width: 100px;
height: 100px;
background: orange;
opacity: 1;
}
.top {
top: 100px;
}
.bottom{
top: 400px;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="bottom"></div>
<script type="text/javascript">
console.log('多物体链式运动，多值同时运动')
var oDivArr = document.getElementsByTagName('div');
var targetObj ={
width: 400,
height: 400,
opacity: 50,
left: 300,
top: 200
}
oDivArr[0].onclick = function() {
startMove(this, targetObj, function(){
startMove(oDivArr[1], targetObj)
})
}
</script>
</body>
</html>效果
