js和jQuery设置Opacity半透明 兼容IE6


Posted in Javascript onMay 24, 2016

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的方法的。

Javascript 相关文章推荐
js 左右悬浮对联广告代码示例
Dec 12 Javascript
通用无限极下拉菜单的实现代码
May 31 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
Jun 30 Javascript
原生JS实现简单放大镜效果
Feb 08 Javascript
ionic2 tabs 图标自定义实例
Mar 08 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
Sep 21 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
Oct 31 Javascript
JS字典Dictionary类定义与用法示例
Feb 01 Javascript
9102年webpack4搭建vue项目的方法步骤
Feb 20 Javascript
详解element上传组件before-remove钩子问题解决
Apr 08 Javascript
vue使用过滤器格式化日期
Jan 20 Vue.js
vue判断按钮是否可以点击
Apr 09 Vue.js
浅析jquery unbind()方法移除元素绑定的事件
May 24 #Javascript
jQuery unbind 删除绑定事件详解
May 24 #Javascript
深入理解jQuery之防止冒泡事件
May 24 #Javascript
30分钟快速掌握Bootstrap框架
May 24 #Javascript
JQuery 传送中文乱码问题的简单解决办法
May 24 #Javascript
深入理解jQuery中的事件冒泡
May 24 #Javascript
jQuery 弹出层插件(推荐)
May 24 #Javascript
You might like
PHP系统流量分析的程序
2006/10/09 PHP
PHP依赖注入(DI)和控制反转(IoC)详解
2017/06/12 PHP
php连接mysql之mysql_connect()与mysqli_connect()的区别
2020/07/19 PHP
javascript实现动态增加删除表格行(兼容IE/FF)
2007/04/02 Javascript
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
2007/08/15 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
2013/01/21 Javascript
jquery实现div阴影效果示例代码
2013/09/16 Javascript
常用的几段javascript代码分享
2014/03/25 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
jQuery如何使用自动触发事件trigger
2015/11/29 Javascript
使用Script元素发送JSONP请求的方法
2016/06/12 Javascript
vue父组件通过props如何向子组件传递方法详解
2017/08/16 Javascript
ES6 javascript中Class类继承用法实例详解
2017/10/30 Javascript
React Native 使用Fetch发送网络请求的示例代码
2017/12/02 Javascript
在vue项目中集成graphql(vue-ApolloClient)
2018/09/08 Javascript
JS+CSS实现随机点名(实例代码)
2019/11/04 Javascript
JS实现简单日历特效
2020/01/03 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
2020/02/04 Javascript
[05:53]敌法师的金色冠名ID"BurNIng",是传说,是荣耀
2020/07/11 DOTA
python基础教程之基本数据类型和变量声明介绍
2014/08/29 Python
python实现忽略大小写对字符串列表排序的方法
2014/09/25 Python
Ruby元编程基础学习笔记整理
2016/07/02 Python
python中的&amp;&amp;及||的实现示例
2019/08/07 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
Css3+Js制作漂亮时钟(附源码)
2013/04/24 HTML / CSS
HTML5中indexedDB 数据库的使用实例
2017/05/11 HTML / CSS
世界上最好的帽子:Tilley
2016/11/27 全球购物
印度购物网站:TATA CLiQ
2017/11/23 全球购物
Tech21美国/加拿大:英国NO.1防摔保护壳品牌
2018/01/20 全球购物
俄罗斯园林植物网上商店:Garshinka
2020/07/16 全球购物
高中班长自我鉴定
2013/12/20 职场文书
关于赌博的检讨书
2014/01/24 职场文书
自荐信如何制作?
2014/02/21 职场文书
电气工程自动化求职信
2014/03/14 职场文书
建材投资建议书
2014/05/16 职场文书
小学生2015教师节演讲稿
2015/03/19 职场文书