原生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 相关文章推荐
解析window.open的使用方法总结
Jun 19 Javascript
详解JavaScript中的异常处理方法
Jun 16 Javascript
微信小程序 生命周期详解
Oct 12 Javascript
jstree的简单实例
Dec 01 Javascript
Vue.js自定义指令的用法与实例解析
Jan 18 Javascript
vuejs2.0子组件改变父组件的数据实例
May 10 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
Aug 23 Javascript
微信小程序性能优化之checkSession的使用
Mar 06 Javascript
layui 动态设置checbox 选中状态的例子
Sep 02 Javascript
vue 检测用户上传图片宽高的方法
Feb 06 Javascript
element-ui tree结构实现增删改自定义功能代码
Aug 31 Javascript
详解uniapp的全局变量实现方式
Jan 11 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下通过伪造http头破解防盗链的代码
2010/07/03 PHP
PHP使用CURL_MULTI实现多线程采集的例子
2014/07/29 PHP
php常用的工具开发整理
2019/09/26 PHP
laravel-admin 中列表筛选方法
2019/10/03 PHP
tp5 sum某个字段相加得到总数的例子
2019/10/18 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
网页自动刷新,不产生嗒嗒声的一个解决方法
2007/03/27 Javascript
javascript Excel操作知识点
2009/04/24 Javascript
9个javascript语法高亮插件 推荐
2009/07/18 Javascript
jquery $.getJSON()跨域请求
2011/12/21 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
2014/05/28 Javascript
extjs_02_grid显示本地数据、显示跨域数据
2014/06/23 Javascript
使用ajax+jqtransform实现动态加载select
2014/12/01 Javascript
JavaScript实现将文本框的值插入指定位置的方法
2015/08/13 Javascript
分享jQuery网页元素拖拽插件
2020/12/01 Javascript
ES6中Math对象的部分扩展
2017/02/20 Javascript
实例分析nodejs模块xml2js解析xml过程中遇到的坑
2017/03/18 NodeJs
解决Vue在Tomcat8下部署页面不加载的问题
2019/11/12 Javascript
Python ftp上传文件
2016/02/13 Python
matplotlib绘制符合论文要求的图片实例(必看篇)
2017/06/02 Python
用python制作游戏外挂
2018/01/04 Python
在mac下查找python包存放路径site-packages的实现方法
2018/11/06 Python
tensorflow的计算图总结
2020/01/12 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
Python学习工具jupyter notebook安装及用法解析
2020/10/23 Python
唤醒头发毛囊的秘密武器:Grow Gorgeous
2016/08/28 全球购物
银行介绍信范文
2014/01/10 职场文书
个人贷款承诺书
2014/03/28 职场文书
作风建设整改方案
2014/10/27 职场文书
工作岗位职责范本
2015/02/15 职场文书
爱护环境卫生倡议书
2015/04/29 职场文书
党员公开承诺书(2016最新版)
2016/03/24 职场文书
导游词之藏龙百瀑景区
2019/12/30 职场文书
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis
mysql函数之截取字符串的实现
2022/08/14 MySQL