查找有关jQuery中透明度的相关问题

发布时间：2023-09-15 14:54:26 所属栏目：教程来源：

导读：在日常开发的网站中，常常会用到设置透明度问题，最简单的就是图片的淡入淡出效果。下面我介绍一下在原生js和jQuery中设置透明度的相关问题和注意点：

1 透明度样式设置

透明度在IE浏览器和其他相关浏览器中

在日常开发的网站中，常常会用到设置透明度问题，最简单的就是图片的淡入淡出效果。下面我介绍一下在原生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);

}

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!