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

260 阅读 0 评论 172 点赞

我是靠谱客的博主小巧机器猫，最近开发中收集的这篇文章主要介绍原生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); 
} 