- 实现同时改变对象的多种属性变化
- 使用了json来传参
move.js
/**
* Created by admin on 2017/3/20.
*/
/**
*
* @param obj 运动的对象
* @param json {width:400, height:400}
* @param fnEnd回调
*/
function move(obj, json, fnEnd){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
for(var attr in json){
var target = json[attr];
if(attr == "opacity")
var cur = parseFloat(getStyle(obj, attr))*100;
else
var cur = parseInt(getStyle(obj, attr));
var speed = (target - cur)/6;
speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
if(cur == target){
clearInterval(obj.timer);
console.log(obj + "---" + attr+ " to " +target+ " is over ");
if(fnEnd)fnEnd();
}else{
if(attr == "opacity"){
obj.style.opacity = (cur + speed)/100;
obj.style.filter = "alpha(opacity:"+(cur+speed)+")";
}
else
obj.style[attr] = (cur + speed) + "px";
}
}
}, 30)
}
/**
* 获取行间/内联/外部样式，无法设置
* @param obj
* @param attr
*/
function getStyle(obj, attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj, false)[attr];
}
}
HTML
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>完美运动框架</title>
<script src="js/move2.js"></script>
<style>
body{
background-color: #cccccc;
}
div{
width: 100px;
height: 100px;
background-color: crimson;
border: 2px solid white;
margin: 10px;
float: left;
color: white;
text-align: center;
line-height: 100px;
font-size: 15px;
opacity: 0.3;
filter: alpha(opacity:30);
}
</style>
<script>
window.onload = function(){
var div = document.getElementsByTagName("div")[0];
div.onmouseover = function(){
move(this, {width:200, height:200, opacity:100, fontSize:30});
}
div.onmouseout = function(){
move(this, {width:100, height:100, opacity:30, fontSize:15});
}
}
</script>
</head>
<body>
<div>测试</div>
</body>
</html>
效果
jsSport6.gif
