<!DOCTY html>
<html>
<head>
<meta charset="UTF-8">
<title>任意属性/链式运动</title>
<style type="text/css">
body,div{
margin:0;
padding:0;}
#div1{
width:200px;
height:200px;
border:1px solid yellow;
background-color:blue;
}
#div2{
width:200px;
height:200px;
border:1px solid green;
background:red;
}
</style>
<script type="text/javascript">
window.onload=function(){
//var tags=document.getElementsByTagName('div');
var mId=document.getElementById('div1');
/*for(var i=0;i<tags.length;i++){
tags[i].timer=null;
}*/
mId.onmouseover=function(){
startmove(this,'width',400);}
mId.onmouseout=function(){
startmove(this,'width',200);}
}
function getStyle(obj,attr){
var myStyle=null;
if(obj.currentStyle){
myStyle=obj.currentStyle[attr];
}else{
myStyle=getComputedStyle(obj,null)[attr];
}
//attr=='opacity'?myStyle=parseInt(parseFloat(myStyle)*100):myStyle=parseInt(myStyle);
return myStyle;
}
var speed=0;
function startmove(obj,attr,target){
window.clearInterval(obj.timer);
obj.timer=window.setInterval(function(){
var att=getStyle(obj,attr);
speed=parseInt((target-att))/20;
speed>0?speed=Math.ceil(speed):speed=Math.floor(speed);
if(obj.att==obj.target){
window.clearInterval(obj.timer);
/*if(fn){fn()}
}
else{
if(attr=='opacity'){
obj.style.opacity=(att+speed)/100;
console.log(obj.style.opacity);
obj.style.filter='alpha:(opacity:'+att+speed+')';
}*/
}else{obj.style[attr]=att+speed+'px';}
},200);
}
</script>
</head>
<body>
<div id="div1" >
333
</div>
<div id="div2">
222
</div>
</body>
</html>
一下是基于题主的代码稍微修改的，可以运行。题主细心察看一下改动之处。
<!DOCTY html>
<html>
<head>
<meta charset="UTF-8">
<title>任意属性/链式运动</title>
<style type="text/css">
body,div{
margin:0;
padding:0;}
#div1{
width:200px;
height:200px;
border:1px solid yellow;
background-color:blue;
}
#div2{
width:200px;
height:200px;
border:1px solid green;
background:red;
}
</style>
<script type="text/javascript">
window.onload=function(){
var mId=document.getElementById('div1');
//console.log(getStyle(mId,'width'));
mId.onmouseover=function(){
startmove(this,'width',400);}
mId.onmouseout=function(){
startmove(this,'width',200);}
}
function getStyle(obj,attr){
var myStyle=null;
if(obj.currentStyle){
myStyle=obj.currentStyle[attr];
}else{
myStyle=getComputedStyle(obj,null)[attr];
}
return myStyle;
}
var speed=0;
function startmove(obj,attr,target){
window.clearInterval(obj.timer);
obj.timer=window.setInterval(function(){
var att=parseInt(getStyle(obj,attr));
speed=(target-att)/20;
speed>0?speed=Math.ceil(speed):speed=Math.floor(speed);
console.log(speed);
if(att==target){
window.clearInterval(obj.timer);
}else{obj.style[attr]=att+speed+'px';}
},200);
}
</script>
</head>
<body>
<div id="div1" >
333
</div>
<div id="div2">
222
</div>
</body>
</html>0.0