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启动了一个定时器实现动画效果。
总结:说到底就两个属性,一个是这对火狐,谷歌这类浏览器的属性opacity(0.3)直接设置一个小数即可,另一个针对IE的属性filter: alpha(opacity:30),都设置好即可,另外jQuery大大简化了相应的操作,如果网站上用到了jQuery的库,还是很推荐使用jQuery的方法的。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]