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

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

赞 (0)

相关推荐

  • 原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)

    经常看到网页里图片渐变显示,自己写一个. 原理很简单就是修改元素的css透明度. 在线预览效果:http://jsfiddle.net/dtdxrk/BHUp9/embedded/result/ 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <

  • 基于JS实现仿京东搜索栏随滑动透明度渐变效果

    基于JS实现仿京东搜索栏随滑动透明度渐变效果

    废话不多说,直接上代码: 1.HTML <header class="module-layer"> <div class="module-layer-content"> <div class="search-box-cover"></div> <p class="layer-return"></p> <h1 class="layer-hea

  • JavaScript CSS 修改学习第四章 透明度设置

    JavaScript CSS 修改学习第四章 透明度设置

    这里是测试页.在JavaScript里面设置透明度 我用下面的代码来设置透明度: 复制代码 代码如下: function setOpacity(value) {     testObj.style.opacity = value/10;     testObj.style.filter = 'alpha(opacity=' + value*10 + ')'; } 在Mozilla和Safari里使用opacity,IE使用filter.value的值从0到10. 测试结果 IE说明:一个元素必须

  • js实现透明度渐变效果的方法

    本文实例讲述了js实现透明度渐变效果的方法.分享给大家供大家参考.具体分析如下: 这里可实现一开始元素的透明度是30,鼠标移上的时候,透明度慢慢增加,到透明度100停止.鼠标移出,透明度慢慢减少,减少到30的效果. 要点一:因为无法直接获取和改变透明度的值,可以把透明度值赋给一个变量,让变量变化,最后把变量的值再赋给元素的透明值. var alpha=30; 要点二:判断目标值和目前透明值,来判定是正向速度还是负向速度. if(target > alpha){ speed = 2; }else{

  • js实现感应鼠标图片透明度变化的方法

    本文实例讲述了js实现感应鼠标图片透明度变化的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>感应鼠标图片透明度变化</title> <SCRIPT language="JavaScript"> <!-- function makevisible(cur,which){ if (which==0) cur.filters.alpha.opacity=100

  • 推荐js实现商品分类到搜索栏友好提示（人机交互）第1/3页

    中间的表格代表搜索表单,要实现的是点商品分类后有一个方框指向到搜索栏,用以清楚地告诉用户:点商品分类后是哪里改变了转载请注明出处 blueidea 方框移动 笔记本 小家电 电冰箱 波比娃娃 小家电 小家电 笔记本 小家电 电冰箱 波比娃娃 小家电 小家电 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 呵呵,效果很棒,不过在ff下有些小问题,已经改了.加精 方框移动 笔记本 小家电 电冰箱 波比娃娃 小家电 小家电 笔记本 小家电 电冰箱 波比娃娃 小家电 小家电 [Ctrl+A

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

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

  • 原生js和jQuery实现淡入淡出轮播效果

    本文实例为大家介绍了基于jQuery实现淡入淡出轮播效果的关键代码,分享给大家供大家参考,具体内容如下: 基本原理:将所有图片绝对定位在同一位置,透明度设为0,然后通过jQuery的淡入淡出实现图片的切换效果. html代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>一个轮播&l

  • 原生js和jquery分别实现横向导航菜单效果

    原生js和jquery分别实现横向导航菜单效果

    本文实例为大家分享了原生js和jquery横向导航菜单的制作方法,供大家参考,具体内容如下 原生javascript实现: 这一次要实现的是鼠标放上去以后,菜单栏被选中的那一栏水平拉伸,鼠标离开后水平收缩.并带有一定的时间性,使肉眼能够看出其拉伸收缩的动画效果. 开始用javascript进行编写: 首先在之前水平方向的导航栏上进行操作,将第一栏和选中栏的样式只改变为背景变黑色,文字变白色 .on,a:hover{background:#000000;color:#FFFFFF;} 之后开始写j

  • ajax在js中和jQuery中的用法实例详解

    目录 原生 JS 怎么发送一个 get 请求 怎么发送一个 post 请求 发送一个带有参数的 get 请求 发送一个带有参数的 post 请求 jQuery $.get 几个参数,怎么使用 $.post 几个参数,怎么使用 $.ajax 几个参数,怎么使用 JSONP $.ajax 怎么发送 jaonp 请求 总结 原生 JS 怎么发送一个 get 请求 创建一个 ajax 对象 var xhr = new XMLHttpRequest() 设置请求方式和请求地址[,是否异步] xhr.ope

  • 原生js仿jquery一些常用方法(必看篇)

    最近迷上了原生js,能不用jquery等框架的情况都会手写一些js方法,记得刚接触前端的时候为了选择器而使用jquery...现在利用扩展原型的方法实现一些jquery函数: 1.显示/隐藏 //hide() Object.prototype.hide = function(){ this.style.display="none"; return this; } //show() Object.prototype.show = function(){ this.style.displa

  • JavaScript之事件委托实例(附原生js和jQuery代码)

    事件委托的原理依赖于事件冒泡,可以通过给父元素的事件委托来确定是哪个子元素触发了事件从而做一系列操作. 使用事件委托的优点 1.操作子元素时不用一一遍历,可以根据事件触发的对象而进行相应操作 dom结构如下: <ul id = "oUl"> <li class = "item"></li> <li class = "item"></li> <li class = "ite

  • 原生js仿jquery实现对Ajax的封装

    前言 与js相比,jquery为我们省去了冗长的获取元素的代码,不用考虑一些麻烦的兼容问题,更加方便的动画实现,以及更加方便的方法调用让我们觉得jquery真是越用越舒服.但是jquery说到底还是对js的封装,我们不光要用的舒服还要深入理解其中的原理,这样才能更好的使用它. 首先我们封装的函数为了能实现可传入无限多个参数,在使用我们即将封装的函数时,需要使用对象进行传参,形式如下: //data作为参数传入我们下面封装的函数 var data = { //数据 user:"yonghu1&qu

  • 关于JS与jQuery中的文档加载问题

    jquery中的$(document).ready()类似于javascript中的window.onload(),但是其中还是有很大区别的 1.jquery中的可以简化为$().ready(),$(function),   而js却不行必须全部写完. 2.同时js的window.onload()只能有一个,而jquery的$(document).ready()却可以有多个. 3.最重要的一点是window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.   $(documen

  • 原生js实现jquery函数animate()动画效果的简单实例

    通过在公司一个月的实习,慢慢的对css跟html算是比较熟悉了,这几天开始研究js,今天用js写了一个jquery的animate函数,测试了下,性能还可以.个人觉得jquery并不是万能的,因为是个框架,所以有些东西写的比较死,就像animate函数一样,可选的参数不多有时候可能并不能实现我们想要的效果. 注释的部分是用来测试用的,写代码的过程并不是十分顺利,因为用js平时用的不是很细,都是大体知道方法,也用过,但等到真正要实现动画函数的时候,细枝末节写错了就可能把人难住了. 函数里面有几个参

  • JS、jQuery中select的用法详解

    1.js var obj=document.getElementById(selectid); obj.options.length = 0; //清除所有内容 obj.options[index] = new Option("three",3); //更改对应的值 obj.options[index].selected = true; //保持选中状态 obj.add(new Option("4","4")); "文本",&

随机推荐