js的淡入淡出

Azikou

于 2013-09-27 18:28:07 发布

阅读量717

点赞数

本文链接：https://blog.csdn.net/u011909890/article/details/12107731

版权

用JS来实现图片的淡入淡出动作

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>arguments</title>
<meta name="keyword" content=""/>
<meta name="description" content=""/>
<meta name="viewport" content="width=device-width"/>
<style type="text/css">
#div1{width:100px;height:100px;background-color: red;filter:alpha(opacity:30);opacity: 0.3;}

</style>

</head>
<body>
	



<div id="div1">1</div>

<input type="button" value="开始" id="button"/>


<script type="text/javascript">
var alpha=30;
 var timer=null;
function move(aTarget){
  var odiv=document.getElementById('div1');

  clearInterval(timer)
  timer= setInterval(function () {
	  var speed=0;
  if(alpha<aTarget){
     speed=+10;
  }else{
  	speed=-10
  };
  if (alpha==aTarget) {
  	  clearInterval(timer)
  	}else{
  		alpha+=speed;
  		odiv.style.filter='alpha(opacity:'+alpha+')';
  		odiv.style.opacity=alpha/100;
  	}
},30);
}
/*window.οnlοad=function(){

var odiv=document.getElementById('div1');
odiv.addEventListener('mouseover',move(100),false);
odiv.addEventListener('mouseout',move(30),false)
}*/

window.οnlοad=function(){
	var odiv=document.getElementById('div1');
odiv.οnmοuseοver=function(){
	move(100)
};odiv.οnmοuseοut=function(){
	move(30)
};}
</script>
</body>

</html>