1、透明度的样式设置：
透明度在IE浏览器和其他相关浏览器中的设置方法不太相同，IE使用filter：alpha属性，firefox使用opactiy属性；
filter:alpha(opacity:30); opacity:0.3;
2、原生js设置透明度
为了兼容IE与其他浏览器对透明度的设置，代码如下：
var alpha=30;
var mydiv=document.getElementById("myDiv");
mydiv.style.filter="alpha(opacity:"+alpha+")";
mydiv.style.opacity=alpha/100;
3、jQuery设置透明度
jQuery中对透明度的设置进行了整合，兼容IE和其他浏览器，修改opactiy属性值即可，值为小数，因此只需要设置一次即可；
代码如下:
$(function(){
$("#div1").css("opacity","0.3"); //设置透明度
});
4、举例：鼠标移入，透明度变小；鼠标移出，恢复。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js透明度动画</title>
<style type="text/css">
*{margin:0;padding:0;}
div{
width:200px;
height:200px;
background-color:#f00;
filter:alpha(opacity:100);/*IE浏览器*/
opacity:1;/*Firefox浏览器*/
}
</style>
<script>
window.onload=function(){
var mydiv=document.getElementById("myDiv");
mydiv.onmouseover=function(){//鼠标移入
startMove(30);
}
mydiv.onmouseout=function(){//鼠标移出
startMove(100);
}
}
var timer=null;
var alpha=30;//透明度值变量
function startMove(iTarget){
var speed=0;
var mydiv=document.getElementById("myDiv");
clearInterval(timer);
timer=setInterval(function(){
if(alpha>iTarget){
speed= -10;
}else{
speed= 10;
}
if(iTarget==alpha){
clearInterval(timer);
}else{
alpha+=speed;
mydiv.style.filter="alpha(opacity:"+alpha+")";//设置IE透明度
mydiv.style.opacity=alpha/100;//设置Firefox透明度，值为小数，其实可以写成alpha*0.01
}
},50);
}
</script>
</head>
<body>
<div id="myDiv"></div>
</body>
</html>
时间： 2024-12-29 11:21:50