原生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解密入门之凭直觉解
Jun 25 Javascript
jQuery 自定义函数写法分享
Mar 30 Javascript
JS 数字转换研究总结
Dec 26 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
Jan 08 Javascript
举例讲解如何判断JavaScript中对象的类型
Apr 22 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
Aug 09 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
Jun 15 Javascript
详解vue.js数据传递以及数据分发slot
Jan 20 Javascript
JS添加或删除HTML dom元素的方法实例分析
Mar 05 Javascript
javascript实现手动点赞效果
Apr 09 Javascript
vue 中 beforeRouteEnter 死循环的问题
Apr 23 Javascript
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
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
rrmdir php中递归删除目录及目录下的文件
2011/05/15 PHP
set_exception_handler函数在ThinkPHP中的用法
2014/10/31 PHP
php过滤表单提交的html等危险代码
2014/11/03 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
php正则修正符用法实例详解
2016/12/29 PHP
PHP实现与java 通信的插件使用教程
2019/08/11 PHP
jQuery 表格工具集
2010/04/25 Javascript
基于JQuery的列表拖动排序实现代码
2013/10/01 Javascript
jquery 快速回到页首的方法
2013/12/05 Javascript
JS调试必备的5个debug技巧
2014/03/07 Javascript
JavaScript中最简洁的编码html字符串的方法
2014/10/11 Javascript
JavaScript动态设置div的样式的方法
2015/12/26 Javascript
jQuery实现的文字hover颜色渐变效果实例
2016/02/20 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
2016/10/21 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
2016/11/16 Javascript
jquery中绑定事件的异同
2017/02/28 Javascript
AngularJS折叠菜单实现方法示例
2017/05/18 Javascript
微信小程序 scroll-view实现锚点滑动的示例
2017/12/06 Javascript
node全局变量__dirname与__filename的区别
2019/01/14 Javascript
javascript中floor使用方法总结
2019/02/02 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
2019/09/28 Javascript
JavaScript setInterval()与setTimeout()计时器
2019/12/27 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
2020/11/10 Javascript
python类和继承用法实例
2015/07/07 Python
python自动翻译实现方法
2016/05/28 Python
Python字符串格式化输出代码实例
2019/11/22 Python
django 框架实现的用户注册、登录、退出功能示例
2019/11/28 Python
python pymysql链接数据库查询结果转为Dataframe实例
2020/06/05 Python
HTML5 Web Workers之网站也能多线程的实现
2013/04/24 HTML / CSS
贝嫂喜欢的婴儿品牌,个性化的婴儿礼物:My 1st Years
2017/11/19 全球购物
英国最全面的橄榄球联盟门票网站:Live Rugby Tickets
2018/10/06 全球购物
飞机制造技术专业求职信
2014/07/27 职场文书
先进党组织事迹材料
2014/12/26 职场文书
2016年安全生产先进个人事迹材料
2016/02/29 职场文书
CSS实现章节添加自增序号的方法
2021/06/23 HTML / CSS
关于python3 opencv 图像二值化的问题(cv2.adaptiveThreshold函数)
2022/04/04 Python