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


Posted in Javascript onJanuary 08, 2014

在日常开发的网站中,常常会用到设置透明度问题,最简单的就是图片的淡入淡出效果。下面我介绍一下在原生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); 
}
Javascript 相关文章推荐
JS与框架页的操作代码
Jan 17 Javascript
js弹出div并显示遮罩层
Feb 12 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
Jun 21 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
Sep 14 Javascript
requirejs + vue 项目搭建详解
Jun 16 Javascript
jquery DataTable实现前后台动态分页
Jun 17 jQuery
基于JS实现移动端左滑删除功能
Jul 28 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
Nov 16 Javascript
基于webpack4搭建的react项目框架的方法
Jun 30 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
Feb 02 Javascript
微信小程序结合Storage实现搜索历史效果
May 18 Javascript
vue使用swiper实现中间大两边小的轮播图效果
Nov 24 Javascript
iframe窗口高度自适应的实现方法
Jan 08 #Javascript
jquery对单选框,多选框,文本框等常见操作小结
Jan 08 #Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
Jan 08 #Javascript
js获取当前页面路径示例讲解
Jan 08 #Javascript
js获取当前路径的简单示例代码
Jan 08 #Javascript
JS 操作Array数组的方法及属性实例解析
Jan 08 #Javascript
jquery 图片缩放拖动的简单实例
Jan 08 #Javascript
You might like
PHP中的CMS的涵义
2007/03/11 PHP
php 购物车实例(申精)
2009/05/11 PHP
火车采集器 免费版使出收费版本功能实现原理
2009/09/17 PHP
php 分库分表hash算法
2009/11/12 PHP
PHP编程计算两个时间段是否有交集的实现方法(不算边界重叠)
2017/05/30 PHP
PHP simplexml_import_dom()函数讲解
2019/02/03 PHP
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
jQuery实现的一个自定义Placeholder属性插件
2014/08/11 Javascript
JS操作HTML自定义属性的方法
2015/02/10 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
2015/08/11 Javascript
vue制作加载更多功能的正确打开方式
2016/10/12 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
js实现增加数字显示的环形进度条效果
2017/02/05 Javascript
JS实现的按钮点击颜色切换功能示例
2017/10/19 Javascript
详解nodejs 开发企业微信第三方应用入门教程
2019/03/12 NodeJs
今天 平安夜 Python 送你一顶圣诞帽 @微信官方
2017/12/25 Python
Python iter()函数用法实例分析
2018/03/17 Python
python实现简单加密解密机制
2019/03/19 Python
详解python读取和输出到txt
2019/03/29 Python
pandas-resample按时间聚合实例
2019/12/27 Python
python、PyTorch图像读取与numpy转换实例
2020/01/13 Python
解决Keras TensorFlow 混编中 trainable=False设置无效问题
2020/06/28 Python
浅析Python requests 模块
2020/10/09 Python
python 基于PYMYSQL使用MYSQL数据库
2020/12/24 Python
彻底弄明白CSS3的Media Queries(跨平台设计)
2010/07/27 HTML / CSS
Html5 postMessage实现跨域消息传递
2016/03/11 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
2016/06/02 HTML / CSS
天猫某品牌专卖店运营计划书
2014/03/21 职场文书
协议书的格式
2014/04/23 职场文书
新农村建设标语
2014/06/24 职场文书
数学考试作弊检讨书300字
2015/02/16 职场文书
医生个人年度总结
2015/02/28 职场文书
读《钢铁是怎样炼成的》有感:百炼方成钢
2019/11/05 职场文书
MySQL命令无法输入中文问题的解决方式
2021/08/30 MySQL
详解Python+OpenCV绘制灰度直方图
2022/03/22 Python