對於設置元素的透明度的變化。主要思想也是通過一個定時器來控制的。
此外對於透明度有一點要說明一下，就是在IE中我們在css中設置透明度的方式filter:alpha(opacity:value)其中value值從0~100;
在火狐中透明度可以通過opacity：value來設置，其中value=0~1.
代碼如下：
html
<!DOCTYPE html> <html> <head> <title>js動畫事件</title> <link href="move.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="move.js"></script> </head> <body> <div id="div1"> </div> </body> </html>
css
*{ margin:0px; padding:0px; } #div1{ width:200px; height:200px; background-color:red; border:1px solid #eeddcc; opacity:0.3; filter:alpha(opacity:30); }
js
var timer window.onload=function(){ var div1=document.getElementById("div1"); div1.onmouseover=function(){ startchange(100); }; div1.onmouseout=function(){ startchange(30); }; } var alpha=30; function startchange(value){ var div1=document.getElementById("div1"); clearInterval(timer); var speed=0; if(value>alpha){ speed=10; }else if(value<alpha){ speed=-10; } timer=setInterval(function(){ if(value==alpha){ clearInterval(timer); }else{ alpha+=speed; div1.style.filter='alpha(opacity:'+alpha+')';//這個地方的書寫千萬要注意了！！！，這是支持IE方式的 div1.style.opacity=alpha/100;//這里要除以100，將opacity的值降到0~1之間，這是支持火狐方式的。 } },50) }