多个值同时变化
setStyle同时设置多个属性
参数传递
json的使用
for in遍历属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #div{ width: 200px; height: 200px; background: red; margin: 20px; filter: alpha(30); opacity: 0.3; } </style> <script> window.onload = function(){ var oDiv = document.getElementById('div'); oDiv.onmouseover = function () { startMove(oDiv, {202,height:300,opacity:100},function () { console.log(123)//判断定时器有没有停止 }) } } </script> </head> <body> <div id="div"></div> </body> <script src="move2.js"></script> </html>
move2.js
function getStyle(obj,name){
if (obj.currentStyle) {
return obj.currentStyle[name];
} else {
return getComputedStyle(obj,false)[name]
}
}
//var alpha = 30;所有的东西都不能公用
function startMove (obj,json,fnEnd) {
clearInterval(obj.time);
obj.time = setInterval(function(){
var bStop=true;//假设所有的值都到了
for(var attr in json){
var cur = 0;
if (attr == 'opacity') {
cur = Math.round(parseFloat(getStyle(obj,attr))*100);
} else {
cur = parseInt(getStyle(obj,attr));
}
var speed = (json[attr]-cur)/6;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(cur !== json[attr]){//如果有一个值没到
bStop=false;//设置为fslse
}
if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity:'+(cur+speed)+')';
obj.style.opacity = (cur+speed)/100;
}
else {
obj.style[attr] = cur+speed+'px';
}
}
if (bStop) {
clearInterval(obj.time);
if (fnEnd) fnEnd();
}
},30)
}