原生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 相关文章推荐
使用TextRange获取输入框中光标的位
Oct 14 Javascript
javascript 树控件 比较好用
Jun 11 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
May 24 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
Feb 25 Javascript
JS操作JSON要领详细总结
Aug 25 Javascript
分享jQuery封装好的一些常用操作
Jul 28 Javascript
JavaScript 动态三角函数实例详解
Jan 08 Javascript
angular 内存溢出的问题解决
Jul 12 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
改变layer confirm弹窗按钮的颜色方法
Sep 12 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
Feb 09 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
Jul 22 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页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
网页上facebook分享功能具体实现
2014/01/26 PHP
从零开始学YII2框架(五)快速生成代码工具 Gii 的使用
2014/08/20 PHP
MyEclipse常用配置图文教程
2014/09/11 PHP
PHP的Yii框架的基本使用示例
2015/08/21 PHP
详解WordPress中用于合成数组的wp_parse_args()函数
2015/12/18 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
2009/07/19 Javascript
在javascript中关于节点内容加强
2013/04/11 Javascript
Extjs单独定义各组件的实例代码
2013/06/25 Javascript
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
Nodejs之TCP服务端与客户端聊天程序详解
2017/07/07 NodeJs
vue导出html、word和pdf的实现代码
2018/07/31 Javascript
Vue2 添加数据可视化支持的方法步骤
2019/01/02 Javascript
Vue路由模块化配置的完整步骤
2019/08/14 Javascript
如何对react hooks进行单元测试的方法
2019/08/14 Javascript
JS操作json对象key、value的常用方法分析
2019/10/29 Javascript
javascript操作元素的常见方法小结
2019/11/13 Javascript
解决vux 中popup 组件Mask 遮罩在最上层的问题
2020/11/03 Javascript
Python中使用tarfile压缩、解压tar归档文件示例
2015/04/05 Python
总结用Pdb库调试Python的方式及常用的命令
2016/08/18 Python
浅谈python中的正则表达式(re模块)
2017/10/17 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
python 将list转成字符串,中间用符号分隔的方法
2018/10/23 Python
Python打开文件,将list、numpy数组内容写入txt文件中的方法
2018/10/26 Python
python多进程控制学习小结
2018/10/31 Python
Python中垃圾回收和del语句详解
2018/11/15 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
20世纪40年代连衣裙和复古服装:The Seamstress Of Bloomsbury
2018/07/24 全球购物
求职简历的自我评价怎样写好
2013/10/07 职场文书
会计出纳岗位职责
2013/12/25 职场文书
小学运动会入场式解说词
2014/02/18 职场文书
前处理组长岗位职责
2014/03/01 职场文书
升国旗仪式主持词
2014/03/19 职场文书
白莲教口号
2014/06/18 职场文书