转载 自 http://www.cnblogs.com/yuaima/p/5113553.html
对于设置元素的透明度的变化。主要思想也是通过一个定时器来控制的。
此外对于透明度有一点要说明一下，就是在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)
}
时间： 2024-08-08 11:46:48