首页 > 代码库 > js链式动画小例子
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>
<body>
<div id="odiv">
</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=http://www.mamicode.com/Math.round(parseFloat(getStyle(obj,attr))*100);
//
}else{
//去掉字符串中的Px,再变成整数
currentValue=http://www.mamicode.com/parseInt(getStyle(obj,attr))//100
}
var speed;//每次动画增长的幅度
speed = (targetValue-currentValue)/4;
speed =speed>0?Math.ceil(speed):Math.floor(speed);
//当对象到达目标时，停止动画，开始下一个动画
if(currentValue=http://www.mamicode.com/=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>
js链式动画小例子