<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>封装运动框架的多个属性</title>
<style>
div{ 100px; height: 100px; background-color:pink; position: absolute; left: 10px; top: 50px; }
</style>
</head>
<body>
<button id="btn200">200</button>
<button id="btn400">400</button>
<div id="demo"></div>
</body>
</html>
<script>
//想法：运用json来完成多个属性运动
// 1、先获得出当前样式
// 2、（最终的样式-当前的样式）/10 得到所谓的步长 当前样式用函数封装
// 3、得到对象的样式属性 = current + step +“px”
var btn200 = document.getElementById("btn200");
var btn400 = document.getElementById("btn400");
var demo = document.getElementById("demo");
btn200.onclick = function(){
animate(demo,{200,top:300,height:600,opacity:40, zIndex:3},function(){ alert("我来了")});
}
btn400.onclick = function(){
animate(demo,{top:200,left:500});
}
// 多个属性运动框架 添加回调函数
function animate(obj,json,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
//开始遍历json
var flag = true; //用来判断是否清除定时器
for(var attr in json){
//算出步长 = (目的样式 - 当前样式 ) / 10
var current = 0;
if(attr == "opacity")
{
current = Math.round(parseInt(getStyle(obj,attr)*100)) || 0;
}else
{
current = parseInt(getStyle(obj,attr));
}
// console.log(current)
//json[attr] 表示数值 attr 表示属性
var step = (json[attr] - current)/10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//兼容性
if(attr == "opacity") //判断用户有没有输入透明度
{
// 判断浏览器是否支持这个属性
if("opacity" in obj.style)
{
obj.style.opacity = (current + step) / 100;
}else
{
obj.style.filter = "alpha(opacity = "+ (current + step)*10 +" )"
}
}
else if(attr == "zIndex")
{
obj.style.zIndex = json[attr];
}
else{
obj.style[attr] = current + step + "px";
}
//如果当前样式中只要有一个样式没执行完毕 都要开着定时器
if(json[attr] != current){
flag = false;
}
}
if(flag) // 用于判断定时器的条件
{
clearInterval(obj.timer);
//alert("ok了");
if(fn) // 很简单 当定时器停止了。 动画就结束了 如果有回调，就应该执行回调
{
fn(); // 函数名 + （） 调用函数 执行函数
}
}
},30)
}
//封装当前样式函数 返回的是个数值
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return window.getComputedStyle(obj,null)[attr]
}
}
</script>