js链式动画小例子

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>链式动画</title>
<style>
* {
margin: 0;
padding: 0;
}

#odiv {
width: 100px;
height: 100px;
background: pink;
opacity: 0.5;

}
</style>
</head>

</div>
<script type="text/javascript">
var odiv = document.getElementById("odiv");

//第三种
//执行动画的对象，目标值，动画的属性，下一个动画
odiv.onmouseover=function(){
starMove(odiv,500,'width',function(){
starMove(odiv,200,'height',function(){
starMove(odiv,100,'opacity',function(){
console.log("结束")
})
})
})
};
odiv.onmouseout=function(){
starMove(odiv,50,'opacity',function(){
starMove(odiv,100,'height',function(){
starMove(odiv,100,'width',function(){
console.log("结束")
})
})
})
}

function starMove(obj, targetValue, attr, nextFn) {
//执行之前动画的结束
clearInterval(obj.timer);
obj.timer = setInterval(function(){ //执行动画的定时器
var currentValue;//执行动画对应的属性的当前值
if(attr == 'opacity'){
currentValue=Math.round(parseFloat(getStyle(obj,attr))*100);
//
}else{
//去掉字符串中的Px,再变成整数
currentValue=parseInt(getStyle(obj,attr))//100
}

var speed;//每次动画增长的幅度
speed = (targetValue-currentValue)/4;
speed =speed>0?Math.ceil(speed):Math.floor(speed);
//当对象到达目标时，停止动画，开始下一个动画
if(currentValue==targetValue){
clearInterval(obj.timer);
if(nextFn){
nextFn();
}

}else{
if(attr=='opacity'){
obj.style.opacity=(currentValue+speed)/100;
}else{
obj.style[attr]=(currentValue+speed)+'px';
}
}

}, 50);
}

//获取当前对象元素的特性属性的函数
function getStyle(obj,attr){
//IE8之前的浏览器
if(obj.currentStyle){//IE8以前的浏览器的方法
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
console.log(getStyle(odiv,"height"))

</script>
</body>

</html>

来源：https://www.cnblogs.com/fyh123/p/5990028.html

标签

动画

动漫