在日常开发的网站中,常常会用到设置透明度问题,最简单的就是图片的淡入淡出效果。下面我介绍一下在原生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 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");   //设置透明度
     });

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);

}

100%透明度效果                       30%透明度效果

js和jquery中有关透明度操作的问题的更多相关文章

  1. 如何在js或者jquery中操作EL表达式的一个List集合

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 先说明此篇博客看明白了可以干嘛: 就是在js或者jquery中操作一个EL表达式的一个list集合或者复杂类型 ...

  2. jQuery中的DOM操作《思维导图》

    首先,是关于jQuery中的DOM操作的<思维导图>,请点击这里:jQuery中的DOM操作 列表框的左右选项移动 <html> <head> <title& ...

  3. 【Java EE 学习 33 上】【JQuery样式操作】【JQuery中的Ajax操作】【JQuery中的XML操作】

    一.JQuery中样式的操作 1.给id=mover的div采用属性增加样式.one $("#b1").click(function(){ $("#mover" ...

  4. dom core,html dom,css dom,jquery 中的dom操作

    前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...

  5. jQuery中的模拟操作

    jQuery中的模拟操作主要是通过trigger来触发,相当于页面加载完成后不需要用户点击按钮,就可以自动触发页面中的相关事件. trigger(type,[data])可以用来模拟触发自定义事件的触 ...

  6. jQuery中的DOM操作总结

    jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...

  7. JavaWeb学习笔记——jquery中的dom操作

     jquery中的dom操作 废话不说:直接上例子: 1.添加节点-html页面 Append:向每个匹配的元素内部追加内容. <body> <ul id="city& ...

  8. jQuery中的DOM操作<思维导图>

    DOM是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口.使用该接口可以轻松地访问页面中所有的标准组件.简单来说,DOM解决了Netsc ...

  9. jquery中链式操作的this指向

    jquery中链式操作是如何实现? 例如:$(obj).children().css('color','red').next().css('color','red').siblings().css(' ...

随机推荐

  1. EntityFramework 插件之EntityFramework.Extended (批量处理)

    接手了一个用EF来做的项目,由于项目中使用的原生处理,导致很多update都是采用先select 后 update的方式来实现,同时无法批量执行逻辑如:根据订单类型统一更新状态等.所以在经过了N多查找 ...

  2. UVALive 4394 String painter

    这题搞了很久很久..弄得我都不想放上来了,但是想了想还是写上来吧,万一以后忘了怎么做了,又得搞很久很久了.题目是要求把一个字符串变成另外一个,每次可以选择一段字符串变成同一个字符,问最少用变多少次.本 ...

  3. -_-#【Angular】自定义过滤器

    AngularJS学习笔记 <!DOCTYPE html> <html ng-app="Demo"> <head> <meta chars ...

  4. 深入JS系列学习2

    今天看和学习了深入理解JS系列2.3.4.5,更加明白了函数声明和表达式的区别,自执行函数和立即执行函数,js强大的原型链继承,js中对象的想过写法,modules模式等. 在ECMAScript中, ...

  5. 未能找到类型或命名空间名称“XXXX”(是否缺少 using 指令或程序集引用?) 转

    未能找到类型或命名空间名称“XXXX”(是否缺少 using 指令或程序集引用?)   项目中 App_Code 文件夹中的类的命名空间,在添加的页面的  using XXXX  时,提示 未能找到类 ...

  6. [Design Pattern] Facde Pattern 简单案例

    Facade Pattern, 即外观模式,用于隐藏复杂的系统内部逻辑,提供简洁的接口给客户端调用,属于结构类的设计模式.我会将其名字理解为,门户模式. 下面是 Facade Pattern 的一个简 ...

  7. 寻找INTERIGHT衬衫男神! [复制链接]

    寻找INTERIGHT衬衫男神! - 公告板 - 京东内部论坛 - Powered by Discuz! 寻找INTERIGHT衬衫男神!   [复制链接]

  8. WPF自定义数字输入框控件

    要求:只能输入数字和小数点,可以设置最大值,最小值,小数点前长度,小数点后长度(支持绑定设置): 代码如下: using System; using System.Collections.Generi ...

  9. intent的startActivityForResult()方法

      /******************************************************************************************** * au ...

  10. Andrdoid中相应用程序的行为拦截实现方式之----从Java层进行拦截

    致谢: 感谢 简行之旅的这篇blog:http://blog.csdn.net/l173864930/article/details/38455951,这篇文章是參考这篇blog的进行一步一步操作的, ...