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 相关文章推荐
JavaScript中Array 对象相关的几个方法
Dec 22 Javascript
javascript 鼠标滚轮事件
Apr 09 Javascript
iphone safari不支持position fixed的解决方法
May 04 Javascript
JQuery在页面中添加和除移DOM示例代码
Jun 24 Javascript
js中AppendChild与insertBefore的用法详细解析
Dec 16 Javascript
如何编写高质量JS代码
Dec 28 Javascript
jquery预加载图片的方法
May 27 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
Nov 10 Javascript
为输入框加入数字js校验代码分享
Nov 02 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
Apr 28 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
Nov 21 Javascript
js中实现继承的五种方法
Jan 25 Javascript
浅析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摘要生成函数(无乱码)
2012/02/04 PHP
ThinkPHP模板IF标签用法详解
2014/07/01 PHP
WordPress中注册菜单与调用菜单的方法详解
2015/12/18 PHP
PHP5.3连接Oracle客户端及PDO_OCI模块的安装方法
2016/05/13 PHP
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
thinkPHP数据库增删改查操作方法实例详解
2016/12/06 PHP
vmware linux系统安装最新的php7图解
2019/04/14 PHP
在laravel中实现事务回滚的方法
2019/10/10 PHP
PhpStorm连接服务器并实现自动上传功能
2020/12/09 PHP
javaScript 数值型和字符串型之间的转换
2009/07/25 Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
2009/11/24 Javascript
JQueryEasyUI datagrid框架的进阶使用
2013/04/08 Javascript
JS随机生成不重复数据的实例方法
2013/07/17 Javascript
js仿小米官网图片轮播特效
2016/09/29 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
2017/05/09 Javascript
Vue自定义指令详解
2017/07/28 Javascript
Chrome调试折腾记之JS断点调试技巧
2017/09/11 Javascript
详解IWinter 一个路由转控制器的 Nodejs 库
2017/11/15 NodeJs
Parcel 打包示例(React HelloWorld)
2018/01/16 Javascript
Nodejs处理异常操作示例
2018/12/25 NodeJs
在微信小程序中保存网络图片
2019/02/12 Javascript
微信小程序遍历Echarts图表实现多个饼图
2019/04/25 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
2019/12/04 Javascript
NodeJS配置CORS实现过程详解
2020/12/02 NodeJs
Python常用爬虫代码总结方便查询
2019/02/25 Python
python生成任意频率正弦波方式
2020/02/25 Python
python 在右键菜单中加入复制目标文件的有效存放路径(单斜杠或者双反斜杠)
2020/04/08 Python
Python高阶函数与装饰器函数的深入讲解
2020/11/10 Python
Python实现PS滤镜中的USM锐化效果
2020/12/04 Python
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
硕士研究生就业推荐信
2014/05/18 职场文书
青春励志演讲稿范文
2014/08/25 职场文书
群众路线教育实践活动的心得体会
2014/09/03 职场文书
资料员岗位职责范本
2015/04/13 职场文书
党员转正党支部意见
2015/06/02 职场文书
pytorch DataLoader的num_workers参数与设置大小详解
2021/05/28 Python