原生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 相关文章推荐
js日期、星座的级联显示代码
Jan 23 Javascript
js中日期的加减法
May 06 Javascript
Javascript刷新窗口方法小结
Oct 21 Javascript
javascript简单比较日期大小的方法
Jan 05 Javascript
jQuery回调方法使用示例
Jun 26 jQuery
ReactJS实现表单的单选多选和反选的示例
Oct 13 Javascript
React Navigation 使用中遇到的问题小结
May 08 Javascript
js实现鼠标单击Tab表单切换效果
May 16 Javascript
Vue二次封装axios为插件使用详解
May 21 Javascript
Vue异步组件处理路由组件加载状态的解决方案
Sep 07 Javascript
基于vue-draggable 实现三级拖动排序效果
Jan 10 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
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
linux命令之调试工具strace的深入分析
2013/06/03 PHP
PHP查找一列有序数组是否包含某值的方法
2020/02/07 PHP
event.X和event.clientX的区别分析
2011/10/06 Javascript
JavaScript 32位整型无符号操作示例
2013/12/08 Javascript
JS中prototype的用法实例分析
2015/03/19 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
2015/11/23 Javascript
深入学习jQuery Validate表单验证
2016/01/18 Javascript
简单谈谈json跨域
2016/03/13 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
2016/05/03 Javascript
用Vue.js实现监听属性的变化
2016/11/17 Javascript
详解Bootstrap各式各样的按钮(推荐)
2016/12/13 Javascript
JavaScript实现垂直滚动条效果
2017/01/18 Javascript
Node.js和Express简单入门介绍
2017/03/24 Javascript
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
2020/06/16 Javascript
[01:13:59]LGD vs Mineski Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
python对json的相关操作实例详解
2017/01/04 Python
python方法生成txt标签文件的实例代码
2018/05/10 Python
对pandas写入读取h5文件的方法详解
2018/12/28 Python
Python测试线程应用程序过程解析
2019/12/31 Python
python清空命令行方式
2020/01/13 Python
Tensorflow分批量读取数据教程
2020/02/07 Python
python判断变量是否为int、字符串、列表、元组、字典的方法详解
2020/02/13 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
Python实现AES加密,解密的两种方法
2020/10/03 Python
神经网络训练采用gpu设置的方式
2021/03/03 Python
css3的focus-within选择器的使用
2020/05/11 HTML / CSS
维珍澳洲航空官网:Virgin Australia
2017/09/08 全球购物
荷兰在线啤酒店:Beerwulf
2019/08/26 全球购物
《与象共舞》教学反思
2014/02/24 职场文书
人力资源本科毕业生求职信
2014/06/04 职场文书
校长个人总结
2015/03/03 职场文书
冲出亚马逊观后感
2015/06/03 职场文书
2016党员发展对象培训心得体会
2016/01/08 职场文书
Django使用redis配置缓存的方法
2021/06/01 Redis
python中Matplotlib绘制直线的实例代码
2021/07/04 Python