我的为什么不管用

来源:2-2 JS透明度动画

慕后端4326127

2016-05-20 11:43

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>透明度动画</title>

<style type="text/css">

*{margin:0; padding:0;}

#div1{

width:200px; 

height:200px;

background-color:red;

filter:alpha(opacity:30);

opacity:0.3;

}

</style>

<script>

window.onload=function(){

var Odiv=document.getElementById('div1');

Odiv.onmouseover=function(){

startMove(100);

}

Odiv.onmouseout=function(){

startMove(30);

}

}

var timer=null;

var alpha=30;

function startMoce(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='aloha(opacity:'+alpha+')';

Odiv.style.opacity=alpha/100;

}  

},30)

}


</script>

</head>


<body>


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

</body>

</html>


写回答 关注

4回答

JS动画效果

通过本课程JS动画的学习,从简单动画开始,逐步深入各种动画框架封装

113923 学习 · 1443 问题

查看课程

相似问题