                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JS動(dòng)畫效果

為什么我寫的沒效果，看著老師的寫的啊。

<!doctype html>

<html>

<head>

<style>

*{margin:0;padding:0;}

#div1{

width:200px;

height:200px;

background:red;

filter:alpha(opacity:30);

opacity:0.3;

}

window.onload=function(){

var oDiv = document.getElementById("div1");

oDiv.onmouseover=function(){

startMove(100);

};

oDiv.onmouseout=function(){

startMove(30);

}

};

var timer=null;

function startMove(iTarget){

var oDiv=document.getElementById("div1");

clearInterval(timer);

timer=setInterval(function(){

var speed = 0;

if(alpha > iTarget){

speed = -10;

}else{

speed=10;

}

if(alpha == iTarget){

clearInterval(timer);

}else{

alpha+=speed;

oDiv.style.filter='alpha(opacity:'+alpha+')';

oDiv.style.opacity=alpha/100;

}

},30)

}

</script>

</style>

</head>

<body>

</body>

</html>

我們在成長

2015-10-13

源自：JS動(dòng)畫效果 2-2

關(guān)注問題我要回答

723

操作

收起

1 回答

我們在成長提問者
2015-10-13

<!doctype?html>
<html>
<head>
<meta?charset="utf-8">
<title>無標(biāo)題文檔</title>
<style>
*{margin:0;padding:0;}
#div1{
	width:200px;
	height:200px;
	background:red;
	filter:alpha(opacity:30);
	opacity:0.3;
}
<script?type="text/javascript">
window.onload=function(){
	var?oDiv?=?document.getElementById("div1");
	oDiv.onmouseover=function(){
		startMove(100);
	};
	oDiv.onmouseout=function(){
		startMove(30);
	}
};
var?timer=null;
function?startMove(iTarget){
	var?oDiv=document.getElementById("div1");
	clearInterval(timer);
	timer=setInterval(function(){
		var?speed?=?0;
		if(alpha?>?iTarget){
			speed?=?	-10;
		}else{
		speed=10;	
		}
		if(alpha?==?iTarget){
			clearInterval(timer);
		}else{
			alpha+=speed;
			oDiv.style.filter='alpha(opacity:'+alpha+')';
			oDiv.style.opacity=alpha/100;
		}
	},30)
}
</script>
</style>
</head>

<body>
<div?id="div1"></div>
</body>
</html>