原生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 相关文章推荐
ie 调试javascript的工具
Apr 29 Javascript
jquery购物车实时结算特效实现思路
Sep 23 Javascript
JQuery给元素绑定click事件多次执行的解决方法
May 29 Javascript
js实现的点击div区域外隐藏div区域
Jun 30 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
May 24 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
Dec 20 Javascript
基于Vue.js 2.0实现百度搜索框效果
Dec 28 Javascript
angular中ui calendar的一些使用心得(推荐)
Nov 03 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
Oct 10 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
Jan 04 Javascript
原生JS实现微信通讯录
Jun 18 Javascript
Vue组件简易模拟实现购物车
Dec 21 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
后宫无数却洁身自好的男主,唐三只爱小舞
2020/03/02 国漫
PHP设计聊天室步步通
2006/10/09 PHP
深入了解php4(1)--回到未来
2006/10/09 PHP
基于php在各种web服务器的运行模式详解
2013/06/03 PHP
PHP把小数转成整数3种方法
2014/06/30 PHP
浅析THINKPHP的addAll支持的最大数据量
2015/02/03 PHP
浅谈php自定义错误日志
2015/02/13 PHP
PHP测试成功的邮件发送案例
2015/10/26 PHP
Yii使用技巧大汇总
2015/12/29 PHP
关于__defineGetter__ 和__defineSetter__的说明
2007/05/12 Javascript
JavaScript Chart 插件整理
2010/06/18 Javascript
JavaScript日历实现代码
2010/09/12 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
2016/04/11 Javascript
JS实现图片的不间断连续滚动的简单实例
2016/06/03 Javascript
js实现背景图自适应窗口大小
2017/01/10 Javascript
简单谈谈Javascript函数中的arguments
2017/02/09 Javascript
layer.confirm取消按钮绑定事件的方法
2018/08/17 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
2018/11/23 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
2018/12/03 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
Python的爬虫框架scrapy用21行代码写一个爬虫
2017/04/24 Python
python编辑用户登入界面的实现代码
2018/07/16 Python
python 实现批量xls文件转csv文件的方法
2018/10/23 Python
python绘制简单彩虹图
2018/11/19 Python
Python I/O与进程的详细讲解
2019/03/08 Python
pip安装python库的方法总结
2019/08/02 Python
Python2和3字符编码的区别知识点整理
2019/08/08 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
Python web框架(django,flask)实现mysql数据库读写分离的示例
2020/11/18 Python
最新茶叶店创业计划书
2014/01/14 职场文书
团代会主持词
2014/04/02 职场文书
负责人任命书范本
2014/06/04 职场文书
授权委托书公证
2014/09/14 职场文书
mysql事务对效率的影响分析总结
2021/10/24 MySQL
mysql序号rownum行号实现方式
2022/12/24 MySQL