                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS动画效果

求大神帮忙看看为啥不能运行呢！！！！！！

<!DOCTY html>

<html>

<head>

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>

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>

333

</div>

222

</div>

</body>

</html>

风骚小王子

2016-11-09

源自：JS动画效果 4-3

关注问题我要回答

1041

操作

收起

2 回答

慕少7532173 回答被采纳 +3 积分
2016-11-09

一下是基于题主的代码稍微修改的，可以运行。题主细心察看一下改动之处。
<!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>