<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height:100px;
background-color: green;
position: absolute;
}
</style>
</head>
<body>
<input type="button" value="显示动画的效果" id="btn" />
<div id="dv"></div>
<script>
//获取元素
function my$(id){
return document.getElementById(id);
}
//获取属性值
function getAttrValue(element,attr){
return element.currentStyle?element.currentStyle[attr]:window.getComputedStyle(element,null)[attr]||0;
}
//加入透明度和层级的缓动动画函数的封装
function animate(element,json,fn){
clearInterval(element.timeId);
element.timeId=setInterval(function(){
var flag=true;
for(var attr in json){
if(attr=="opacity"){//当属性为opacity的情况
var current=getAttrValue(element,attr)*100;
var target=json[attr]*100;
var step=(target-current)/10;
step=step>0?Math.ceil(step):Math.floor(step);
current=current+step;
element.style[attr]=current/100;
}else if(attr=="zIndex"){//当属性是zIndex的情况
element.style[attr]=json[attr];
}else{//一般属性的情况
var current=parseInt(getAttrValue(element,attr));
var target=json[attr];
var step=(target-current)/10;
step=step>0?Math.ceil(step):Math.floor(step);
current=current+step;
element.style[attr]=current+"px";
}
if(current!=target){
flag=false;
}
}
if(flag){
clearInterval(element.timeId);
if(fn){
fn();
}
}
},20);
}
//调用函数:点击按钮层移动
my$("btn").οnclick=function(){
animate(my$("dv"),{"left":400,"top":300,"width":200,"height":100,"opacity":0.3},
function(){animate(my$("dv"),{"left":600,"top":200,"width":300,"height":200,"opacity":1});});
};
</script>
</body>
</html>
js链式动画封装
最新推荐文章于 2021-06-16 18:12:52 发布