<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
#demo{
100px;
height:100px;
background-color: pink;
border:1px solid black;
position:absolute;
top:50px;
left:100px;
opacity:0.4;
}
</style>
</head>
<body>
<button id="btn1">宽度改为300</button>
<button id="btn2">高度改为400</button>
<button id="btn3">背景颜色改为绿色</button>
<button id="btn4">边框改为5px</button>
<button id="btn5">top改为200</button>
<button id="btn6">left改为400</button>
<div id="demo"></div>
</body>
</html>
<script>
function $id(id){return document.getElementById(id);}
var demo=$id("demo");
var btn1=$id("btn1");
var btn2=$id("btn2");
// var btn3=$id("btn3");
// var btn4=$id("btn4");
var btn5=$id("btn5");
var btn6=$id("btn6");
var timer=null;
btn1.onclick=function () {
run(demo,"width",300);
}
btn2.onclick=function () {
run(demo,"height",400);
}
// btn3.onclick=function () {
// run(demo,"backgroundColor","green");
// }
// btn4.onclick=function () {
// run(demo,"border" , "5px");
// }
btn5.onclick=function () {
run(demo,"top",200);
}
btn6.onclick=function () {
run(demo,"left",400);
}
function run(obj,attr,target) //谁的，哪个属性，改成多少
{
obj.timer=setInterval(function(){
var cstyle=parseInt(getStyle(obj,attr));//得到当前样式
var step=(target-cstyle)/10 ;//得到步长
step=step>0 ? Math.ceil(step) : Math.floor(step); //取整步长
obj.style[attr]=cstyle+step+"px"; //动画的基本原理：当前样式+步长
if(parseInt(obj.style[attr])==target)
{
clearInterval(obj.timer);
}
},10)
}
function getStyle(obj,attr) //返回谁的，哪个属性
{
if(obj.currrentStyle)
{
return obj.currentStyle[attr];
}
else{
return window.getComputedStyle(obj,null)[attr]; //w3c浏览器
}
}
</script>
关键代码：
1, 封装单个属性的运动框架函数，run ( obj , attr , target ) , 三个参数，”谁的“ “哪个属性” “改成多少”
2, run(obj,attr,target)
先获取当前样式（调用getStyle(obj,attr)函数)，然后获取步长（步长公式：（target-cstyle)/10), 再取整步长 ，最后 给obj 赋予动画效果（动画的基本原理：当前样式+步长）；
btn1.onclick=function() { run ( demo, "width" ,300); } function run(obj, attr, target) { timer=setInterval (function(){ var cstyle=parseInt(getStyle(obj,attr)); var step=(target-cstyle)/10; step=step>0 ? Math.ceil(step) : Math.floor(step); obj.style[attr]=cstyle+step + "px"; if(parseInt(obj.style[attr]==target)) { clearInterval(timer); } },10) } function getStyle(obj,attr) { if(obj.currentStyle) { return obj.currentStyle[attr]; } else return window.getComputedStyle[obj,null)[attr]; }