编程 Javascript

原生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>

有什么更好的实现方式可以留言。。。

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

动态加载图片路径保持JavaScript控件的相对独立性

Sep 03 Javascript

JS正则中的RegExp对象对象

Nov 07 Javascript

js中通过split函数分割字符串成数组小例子

Sep 21 Javascript

标题过长使用javascript按字节截取字符串

Apr 24 Javascript

javascript字符串替换函数如何一次性全部替换掉

Oct 30 Javascript

浅谈js多维数组和hash数组定义和使用

Jul 27 Javascript

jquery.Callbacks的实现详解

Nov 30 Javascript

JavaScript基础进阶之数组方法总结(推荐)

Sep 04 Javascript

jQuery事件对象的属性和方法详解

Sep 09 jQuery

如何在vue中使用ts的示例代码

Feb 28 Javascript

vue input实现点击按钮文字增删功能示例

Jan 29 Javascript

JS检测浏览器开发者工具是否打开的方法详解

Oct 02 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