运用JSON传递参数:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1{height: 200px;width: 200px;background: red;margin: 20px;float: left;left: 20px; top: 20px;
border: 10px solid black;
filter: alpha(opacity;30);opacity: 0.3;}
</style>
<script>
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}
else{
return getComputedStyle(obj,false)[name];
}
}
function startMove(obj,JSON,fnEnd){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var flag = true;
for (var arguments in JSON) {
var cur = 0;
if(arguments == 'opacity'){
cur = parseFloat(getStyle(obj,arguments))*100;
}
else {
cur = parseInt(getStyle(obj,arguments));
}
var speed = (JSON[arguments] - cur) / 6;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(JSON[arguments] != cur){
flag = false;
}
if(arguments == 'opacity'){
obj.style.filter = 'alpha(opacity:'+(cur+speed)+')';
obj.style.opacity = (cur+speed) / 100;
}
else{
obj.style[arguments] = cur + speed + 'px';
}
}// for
if(flag == true) { //当所有的JSON值都为目标值的时候才关闭定时器
clearInterval(obj.timer);
if(fnEnd)fnEnd(); //传递了函数则执行;
}
},30);
}
window.onclick = function(){
var oDiv1 = document.getElementById("div1");
oDiv1.onmouseover = function(){
startMove(oDiv1,{'width':205,'height':400,'opacity':100});
}
oDiv1.onmouseout = function(){
startMove(oDiv1,{'width':200,'height':200,'opacity':30});
}
}
</script>
</head>
<body>
<div id = "div1">完美运动框架</div>
</body>
</html>