| 标题 | js和jQuery设置Opacity半透明 兼容IE6 |
| 内容 | 对于每一个网站前端开发人员，常常都会遇到设置div透明度的需求，比如在实现图片幻灯片切换效果经常就需要使图片淡入淡出。本文分别对原生js和jQuery在IE和其它浏览器中设置透明度的方法和相关注意事项进行总结。 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 < iTarget){ speed =5; }else{ speed = -5; } if(alpha == iTarget){ clearInterval(timer); }else{ alpha +=speed; //透明度值增加效果 oDiv.style.filter = 'alpha(opacity:'+alpha+')'; //设置IE透明度 oDiv.style.opacity = alpha / 100; //设置其他浏览器 } },30); } window的onload函数指定了在页面加载的时候需要执行的方法，document.getElementById实现通过元素的id得到元素对象，然后通过得到对象的onmouseover绑定了鼠标移到指定层上面时对应需要执行的函数，该实例执行startMove(100)，鼠标移出层通过onmouseout绑定对应的执行函数，该实例执行startMove(30)。 startMove函数实现的功能是将指定元素的透明度设置为传入参数iTarget，范围需要在0-255之间，并使用setInterval启动了一个定时器实现动画效果。 总结：说到底就两个属性，一个是这对火狐，谷歌这类浏览器的属性opacity(0.3)直接设置一个小数即可，另一个针对IE的属性filter: alpha(opacity:30)，都设置好即可，另外jQuery大大简化了相应的操作，如果网站上用到了jQuery的库，还是很推荐使用jQuery的方法的。 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。