原生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 相关文章推荐
jQuery TextBox自动完成条
Jul 22 Javascript
cookie的secure属性详解
Apr 08 Javascript
jQuery实现商品活动倒计时
Oct 16 Javascript
jQuery+正则+文本框只能输入数字的实现方法
Oct 07 Javascript
原生js实现轮播图
Feb 27 Javascript
使用vuex缓存数据并优化自己的vuex-cache
May 30 Javascript
vue自定v-model实现表单数据双向绑定问题
Sep 03 Javascript
详解Vue 全局变量,局部变量
Apr 17 Javascript
turn.js异步加载实现翻书效果
Jul 25 Javascript
vue 实现LED数字时钟效果(开箱即用)
Dec 08 Javascript
JS简易计算器实例讲解
Jun 30 Javascript
原生JS实现相邻月份日历
Oct 13 Javascript
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 mssql扩展SQL查询中文字段名解决方法
2012/10/15 PHP
Codeigniter操作数据库表的优化写法总结
2014/06/12 PHP
PHP基于接口技术实现简单的多态应用完整实例
2017/04/26 PHP
thinkPHP框架通过Redis实现增删改查操作的方法详解
2019/05/13 PHP
javascript中&quot;/&quot;运算符常见错误
2010/10/13 Javascript
js特殊字符过滤的示例代码
2014/03/05 Javascript
javascript 中that的含义示例介绍
2014/05/14 Javascript
JavaScript判断前缀、后缀是否是空格的方法
2015/04/15 Javascript
探究Javascript模板引擎mustache.js使用方法
2016/01/26 Javascript
JavaScript实现简单的拖动效果
2016/07/02 Javascript
vue.js指令v-for使用及索引获取
2016/11/03 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
2017/03/13 Javascript
js实现下拉框效果(select)
2017/03/28 Javascript
Vue resource三种请求格式和万能测试地址
2018/09/26 Javascript
史上最为详细的javascript继承(推荐)
2019/05/18 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
2019/06/13 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
2019/06/19 Javascript
Vue export import 导入导出的多种方式与区别介绍
2020/02/12 Javascript
详解python中字典的循环遍历的两种方式
2017/02/07 Python
Django使用Channels实现WebSocket的方法
2019/07/28 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
前后端结合实现amazeUI分页效果
2020/08/21 HTML / CSS
罗德与泰勒百货官网:Lord & Taylor
2016/08/12 全球购物
莫斯科高科技在线商店:KremlinStore
2019/03/13 全球购物
英国美术用品购物网站:Cass Art
2019/10/08 全球购物
亚马逊新加坡官方网站:Amazon.sg
2020/03/25 全球购物
华为消费者德国官方网站:HUAWEI德国
2020/11/03 全球购物
如何将字串String转换成整数int
2015/02/21 面试题
如何提高JDBC的性能
2013/04/30 面试题
总裁助理岗位职责
2014/02/17 职场文书
大学生暑期实践感言
2014/02/26 职场文书
初中运动会闭幕词范本3篇
2019/12/09 职场文书
SQLServer2008提示评估期已过解决方案
2021/04/12 SQL Server
Python机器学习三大件之一numpy
2021/05/10 Python
利用nginx搭建RTMP视频点播、直播、HLS服务器
2022/05/25 Servers
Redis keys命令的具体使用
2022/06/05 Redis