js和jQuery设置Opacity半透明 兼容IE6

1.css设置透明度

透明度在IE浏览器和其他相关浏览器中的设置方法是不一样的，IE使用滤镜filter的alpha属性，firefox和其它浏览器不支持滤镜，它们使用opactiy属性设置透明度，下面示例设置透明度为30%：

IE：filter: alpha(opacity:30)；

firefox：opacity(0.3)；

2.使用js设置透明度

为了兼容IE与其他浏览器对透明度的设置，我们需要对以上两种样式分别进行设置。下面是一段示例代码：

var alpha = 30; //透明度值变量

var oDiv = document.getElementById(div1); //获取DOM元素对象

oDiv.style.filter = alpha(opacity: alpha ); //设置IE的透明度

oDiv.style.opacity = alpha / 100; //设置fierfox等透明度，注意透明度值是小数

3.jQuery设置透明度

jQuery中对透明度的设置进行了整合，兼容IE和其他浏览器，修改opactiy属性值即可，值为小数，因此只需要设置一次即可。下面是一段示例代码：

$(function(){

$(“#div1”).css(“opacity”,”0.3″); //设置透明度

});

由此可见，使用jQuery进行透明度设置，大大减少了代码编写的难度，同时可以很好地保证不同浏览器的兼容性，但是使用jQuery需要导入jQuery的库文件，在某些场合会给站点的访问速度造成影响，如果要求不是太高，我们也可以直接使用js实现我们需要的效果，下面给出一段使用js实现半透明效果的完整示例代码。

4.应用实例

该实例使用原生js实现一个div的淡入淡出效果；鼠标移入div区域，透明度为100%，鼠标移出div区域透明度为30%，同时用时间控制透明度转换效果；

window.onload=function()

{

var oDiv = document.getElementById(div1);//获取div的DOM对象

oDiv.onmouseover = function() //鼠标移入方法

{

startMove(100);

};

oDiv.onmouseout = function() //鼠标移出方法

{

startMove(30);

};

}

var timer = null;//时间对象

var alpha = 30;//透明度初始值

function startMove(iTarget)

{

var oDiv = document.getElementById(div1);

clearInterval(timer);//清空时间对象

timer = setInterval(function(){

var speed = 0;

if(alpha