原生js实现fadein 和 fadeout淡入淡出效果


Posted in Javascript onJune 05, 2014

js里面设置DOM节点透明度的函数属性:filter= "alpha(opacity=" + value+ ")"(兼容ie)和opacity=value/100(兼容FF和GG)。

先来看看设置透明度的兼容性代码:

function setOpacity(ele, opacity) { 
if (ele.style.opacity != undefined) { 
///兼容FF和GG和新版本IE 
ele.style.opacity = opacity / 100; } else { 
///兼容老版本ie 
ele.style.filter = "alpha(opacity=" + opacity + ")"; 
} 
}

关于有的小伙伴这样写:
function setOpacity(ele, opacity) { 
if (document.all) { 
///兼容ie 
ele.style.filter = "alpha(opacity=" + opacity + ")"; 
} 
ele { 
///兼容FF和GG 
ele.style.opacity = opacity / 100; 
} 
}

我想说这样在IE10下运行有问题,点了之后没反应。因为IE10支持opacity属性不支持filter了,这个方法不可取。

fadein 函数代码:

function fadein(ele, opacity, speed) { 
if (ele) { 
var v = ele.style.filter.replace("alpha(opacity=", "").replace(")", "") || ele.style.opacity; 
v < 1 && (v = v * 100); 
var count = speed / 1000; 
var avg = count < 2 ? (opacity / count) : (opacity / count - 1); 
var timer = null; 
timer = setInterval(function() { 
if (v < opacity) { 
v += avg; 
setOpacity(ele, v); 
} else { 
clearInterval(timer); 
} 
}, 500); 
} 
}

fadeout 函数代码:
function fadeout(ele, opacity, speed) { 
if (ele) { 
var v = ele.style.filter.replace("alpha(opacity=", "").replace(")", "") || ele.style.opacity || 100; 
v < 1 && (v = v * 100); 
var count = speed / 1000; 
var avg = (100 - opacity) / count; 
var timer = null; 
timer = setInterval(function() { 
if (v - avg > opacity) { 
v -= avg; 
setOpacity(ele, v); 
} else { 
clearInterval(timer); 
} 
}, 500); 
} 
}

下面给一个demo示例:
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<script type="text/javascript" src="fade.js"></script> 
<script type="text/javascript"> window.onload = function () { 

document.getElementById('Button1').onclick = function () { 
fadeout(document.getElementById('DV'), 0, 6000); 
} 
document.getElementById('Button2').onclick = function () { 
fadein(document.getElementById('DV'), 80, 6000); 
} 
} 
</script> 
</head> 
<body> 
<div id="DV" style="background-color: green; width: 400px; height: 400px;"></div> 
<input id="Button1" type="button" value="button" /> 
<input id="Button2" type="button" value="button" /> 
</body> 
</html>

有什么更好的实现方式可以留言。。。
Javascript 相关文章推荐
javascript延时重复执行函数 lLoopRun.js
Jun 29 Javascript
JQuery 常用操作代码
Mar 14 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
Sep 01 Javascript
JavaScript设计模式之外观模式实例
Oct 10 Javascript
讲解JavaScript中for...in语句的使用方法
Jun 03 Javascript
JS实现的页面自定义滚动条效果
Oct 26 Javascript
BootStrap selectpicker
Jun 20 Javascript
React快速入门教程
Jan 17 Javascript
面试常见的js算法题
Mar 23 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
May 03 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
Jul 21 Javascript
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
javascript的事件触发器介绍的实现
Jun 05 #Javascript
javascript中attribute和property的区别详解
Jun 05 #Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
Jun 05 #Javascript
用js的document.write输出的广告无阻塞加载的方法
Jun 05 #Javascript
javascript数组去重方法终极总结
Jun 05 #Javascript
javascript设计模式之解释器模式详解
Jun 05 #Javascript
javascript监听鼠标滚轮事件浅析
Jun 05 #Javascript
You might like
PHP中创建并处理图象
2006/10/09 PHP
别人整理的服务器变量:$_SERVER
2006/10/20 PHP
laravel-admin 实现在指定的相册下添加照片
2019/10/21 PHP
PHP 图片合成、仿微信群头像的方法示例
2019/10/25 PHP
javascript的数据类型、字面量、变量介绍
2012/05/23 Javascript
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
2012/06/14 Javascript
js Dialog 实践分享
2012/10/22 Javascript
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
Javascript中浮点数相乘的一个解决方法
2014/06/03 Javascript
Javascript封装DOMContentLoaded事件实例
2014/06/12 Javascript
jquery实现炫酷的叠加层自动切换特效
2015/02/01 Javascript
JavaScript各类型的关系图解
2015/10/16 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
2015/11/07 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
2016/10/14 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
React为 Vue 引入容器组件和展示组件的教程详解
2018/05/03 Javascript
4 种滚动吸顶实现方式的比较
2019/04/09 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
2019/10/23 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
2020/07/28 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
python入门基础之用户输入与模块初认识
2016/11/14 Python
Python numpy.array()生成相同元素数组的示例
2018/11/12 Python
pytorch使用Variable实现线性回归
2019/05/21 Python
Python 等分切分数据及规则命名的实例代码
2019/08/16 Python
django 前端页面如何实现显示前N条数据
2020/03/16 Python
Python调用接口合并Excel表代码实例
2020/03/31 Python
windows支持哪个版本的python
2020/07/03 Python
Champion官网:美国冠军运动服装
2017/01/25 全球购物
个人求职简历的自我评价范文
2013/10/09 职场文书
商务专员岗位职责范本
2014/06/29 职场文书
婚礼父母答谢词
2015/01/04 职场文书
2015年乡镇环保工作总结
2015/04/22 职场文书
PL350与SW11的比较
2021/04/22 无线电