js和jQuery设置半透明的方法

2014-07-23 19:01:15|?次阅读|上传:wustguangh【已有?条评论】发表评论

关键词:JavaScript, JQuery, 界面设计|来源:唯设编程网

对于每一个网站前端开发人员,常常都会遇到设置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启动了一个定时器实现动画效果。

发表评论0条 】
网友评论(共?条评论)..
js和jQuery设置半透明的方法