您现在的位置: 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文

原生js和jquery中有关透明度设置的相关问题

作者:佚名    责任编辑:admin    更新时间:2022-06-22

 设置透明度问题,比如图片的淡入淡出效果。下面我介绍一下在原生js和jQuery中设置透明度的相关问题和注意点

在日常开发的网站中,常常会用到设置透明度问题,最简单的就是图片的淡入淡出效果。下面我介绍一下在原生js和jQuery中设置透明度的相关问题和注意点:    1 透明度样式设置  透明度在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"); //设置透明度  });    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);  }