您的位置
主页 > 网站技术 > 语言编程 > » 正文

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

来源: 站长圈 点击:

设置透明度问题,比如图片的淡入淡出效果。下面我介绍一下在原生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 op = document.getElementById('p1'); //获取DOM元素对象 

op.style.filter = 'alpha(opacity:'+alpha+')'; //设置IE的透明度 

op.style.opacity = alpha / 100; //设置fierfox等透明度,注意透明度值是小数 

3 jQuery设置透明度 

jQuery中对透明度的设置进行了整合,兼容IE和其他浏览器,修改opactiy属性值即可,值为小数,因此只需要设置一次即可; 

复制代码 代码如下:

$(function(){ 

$("#p1").css("opacity","0.3"); //设置透明度 

}); 

4 一个示例 

示例使用原生js实现一个p的淡入淡出效果;鼠标移入p区域,透明度为100%,鼠标移出p区域透明度为30%,同时用时间控制透明度转换效果; 

复制代码 代码如下:

window.onload=function() 

var op = document.getElementById('p1');//获取p的DOM对象 

op.onmouseover = function() //鼠标移入方法 

startMove(100); 

}; 

op.onmouseout = function() //鼠标移出方法 

startMove(30); 

}; 

var timer = null;//时间对象 

var alpha = 30;//透明度初始值 

function startMove(iTarget) 

var op = document.getElementById('p1'); 

clearInterval(timer);//清空时间对象 

timer = setInterval(function(){ 

var speed = 0; 

if(alpha < iTarget) 

speed =5; 

else 

speed = -5; 

if(alpha == iTarget) 

clearInterval(timer); 

else 

alpha +=speed; //透明度值增加效果 

op.style.filter = 'alpha(opacity:'+alpha+')'; //设置IE透明度 

op.style.opacity = alpha / 100; //设置其他浏览器 

},30); 




首页  - 关于站长圈  - 广告服务  - 联系我们  - 关于站长圈  - 网站地图  - 版权声明