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

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

赞 (0)

相关推荐

  • Cross-Browser Variable Opacity with PNG

    Periodically, someone tells me about the magic of PNG, how it's the ideal image format for the web, and that someday we'll all be using it on our sites instead of GIF. People have been saying this for years, and by now most of us have stopped listeni

  • CSS opacity - 实现图片半透明效果的代码

    CSS opacity - 实现图片半透明效果的代码

    前几天一位做网页设计的朋友问我这个问题:如何通过CSS来实现图片半透明效果,并且在IE和Mozilla上都可以得到支持.下面将我的方法分享给大家. 下图为通过CSS实现的图片透明效果 这个效果在IE和Mozilla浏览器上都可以工作,代码如下 <img alt="powerbookg4.jpg" src="archives/images/powerbookg4.jpg" width="250" height="60" s

  • 原生js实现半透明遮罩层效果具体代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • js+CSS实现弹出居中背景半透明div层的方法

    本文实例讲述了js+CSS实现弹出居中背景半透明div层的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

  • Opacity.js

    复制代码 代码如下: //---------------------------------------------------------------  // Opacity Displayer, Version 1.0  // Copyright Michael Lovitt, 6/2002.  // Distribute freely, but please leave this notice intact.  //-------------------------------------

  • 纯JS半透明Tip效果代码

    Test function opacity(id, opacStart, opacEnd, millisec) { //speed for each frame var speed = Math.round(millisec / 100); var timer = 0; //determine the direction for the blending, if start and end are the same nothing happens if(opacStart > opacEnd)

  • IE6下opacity与JQuery的奇妙结合

    复制代码 代码如下: <!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js">&l

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

    1.css设置透明度 透明度在IE浏览器和其他相关浏览器中的设置方法是不一样的,IE使用滤镜filter的alpha属性,firefox和其它浏览器不支持滤镜,它们使用opactiy属性设置透明度,下面示例设置透明度为30%: IE:filter: alpha(opacity:30): firefox:opacity(0.3): 2.使用js设置透明度 为了兼容IE与其他浏览器对透明度的设置,我们需要对以上两种样式分别进行设置.下面是一段示例代码: 复制代码 代码如下: var alpha =

  • js实现连续英文字符自动换行兼容ie6 ie7和firefox

    复制代码 代码如下: irefox中连续英文字符如果要CSS控制强制换行,探索了N久,发现是实现不了的逼不得已的时候就用js脚本进行控制吧 英文字符自动换行,通过js脚本截断字符串,此方法通用ie6,ie7,firefox兼容解决办法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

  • js和jquery设置disabled属性为true使按钮失效

    设置disabled属性为true即为不可用状态. JS document.getElementByIdx("btn").disabled=true; jquery $("#btn").attr("disabled", true); html <input type="button" value="提交" id="btn">

  • jQuery实现可兼容IE6的滚动监听功能

    jQuery实现可兼容IE6的滚动监听功能

    本文实例讲述了jQuery实现可兼容IE6的滚动监听功能.分享给大家供大家参考,具体如下: 其实这东西本打算用原生的javascript来写,但是原生的javascript取class与监听滚动条的滚动过于麻烦,因此上了jQuery,没关系,反正兼容IE6就行. 将实现如下的效果: 也就是在网页中有点常见的滚动监听.相应的标题,滚到哪里,则左边的滚动条当前标题前的...就变成>>>,,当然了,左边的标题同样是可以点击,马上滚到该滚的地方. 首先是网页布局部分,代码如下,请忽略大堆的Jav

  • jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例

    jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例

    本文实例讲述了jQuery实现可兼容IE6的淡入淡出效果告警提示功能.分享给大家供大家参考,具体如下: 其实我觉得告警提示的话,直接用一个Alert就最好的.开门见山,直接让用户明白你当前系统的意思,关键是Alert这东西就是再破的浏览器都必须兼容,不然你它丫的做毛浏览器啊?但是,在现在越来越觉得Alert不美观,而且开始有"弹窗挺吓人"的思潮,因此,告警提示你必须做得好看一点.在Javascript的透明度的操控比较艰难的前提下,jQuery的简单淡入淡出效果是你的选择.之所以选择j

  • jQuery实现可兼容IE6的遮罩功能详解

    本文实例讲述了jQuery实现可兼容IE6的遮罩功能.分享给大家供大家参考,具体如下: 最精简,最强大的 jQuery 遮罩层效果. 当浏览器改变大小时,遮罩层的大小会相应地改变. 遮罩层上方的对话框可随 scroll 的改变而改变,即对话框在浏览器居中显示. HTML 代码 <div id="main"><a onclick="showBg();" href="#" rel="external nofollow&qu

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

    在日常开发的网站中,常常会用到设置透明度问题,最简单的就是图片的淡入淡出效果.下面我介绍一下在原生js和jQuery中设置透明度的相关问题和注意点: 1 透明度样式设置 透明度在IE浏览器和其他相关浏览器中的设置方法不太相同,IE使用filter:alpha属性,firefox使用opactiy属性,下面示例设置透明度为30%: IE:filter: alpha(opacity:30): firefox:opacity(0.3): 2 原生js设置透明度 为了兼容IE与其他浏览器对透明度的设置,

  • jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7

    本屌丝最近工作要求重写网站所有代码,so...极其蛋疼的事情出现了,管我的人要求不能用网上的插件,oh~~~my god!! 这是多么能让千万只草原上的马儿奔腾的要求~~~ 先实现一个比较简单的功能: 需求:网页遮罩层/弹出层,兼容IE6 幸好本屌丝以前聪明收集了个js的版本,so,自己改写成了jQuery插件形式的,方便以后使用. 屁话不多放,无码无真相! 复制代码 代码如下: /******************************* * @name Layer跨浏览器兼容插件 v1.

  • jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)

    jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)

    大多数Web开发人员很可能很熟悉使用锚链接跳转到的页面部分的解决方案.你可以设置一个特定的name属性的锚链接,并使用href值作为哈希符号来跳过页面.这种效果当需要列出很长的数据集时,是非常实用的,比方说一个FAQ页面,一问一答的形式经常采用这样的效果,然而页面跳转对于游客来说有时候并不是好友好,因为他一点击直接跳转,陌生的游客对此可能感到困惑,不知道当前的数据跑那里去了, 在本教程中,我将探讨一个解决方案,创建一个简单的页面索引,并采用锚点链接在页面上."跳转"动作进行动画处理,向

  • jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】

    jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】

    本文实例讲述了jQuery实现最简单的切换图效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>最简单的切换图</title> <!-- 兼容IE6+ 兼容火狐 兼容谷歌 兼容欧朋 --> </head> <body> <

随机推荐