javascript如何实现淡入淡出效果

javascript如何实现淡入淡出效果:
使用jQuery可以轻松的实现div的淡入淡出效果，因为有已经封装好的函数直接调用，不过使用原生的javascript来实现淡入淡出效果就没有那么简单了，不过在某些情况下可能会有所使用，下面通过网络上一个实例代码来分析一下如何实现此效果。
代码实例如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>div淡入淡出效果-蚂蚁部落</title>
<style type="text/css">
* 
{
  margin:0px;
  padding:0px;
}
#box 
{
  width:480px;
  height:270px;
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-240px;
  margin-top:-135px;
  background-color:#333;
}
</style>
<script type="text/javascript">
function func(o)
{
  i=1;
  s=0.01;
  setInterval(function(){
   i+=s; 
   s=i<0?0.01:(i>1?-0.01:s);
   if(o.filters)
   {
    o.filters[0].opacity=i*100;
   }
   else
   {
    o.style.opacity=i;
   } 
  },1)
}
window.onload=function()
{
 var odiv=document.getElementById("box");
 func(odiv);
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>

以上代码集成了div的淡入淡出效果，下面就简单介绍一下此效果的实现过程:

一.实现原理:通过使用定时器函数setInterval()，不断的设置div的透明度，从不透明设置为透明，这样就完成了淡出效果，从透明设置为不透明，这样就实现了淡入效果。需要特别注意浏览器兼容性问题。
二.代码注释:
1.function func(o){}，声明一个函数，参数是一个对象。
2.i=1;s=0.01;声明变量i和s，分别赋值为1和0.01。
3.setInterval()使用定时器函数每隔10毫秒执行一次函数。
3.1.i+=s等同于i=i+s。
3.2.s=i<0?0.01 : (i>1?-0.01:s),这里其实是一个三元运算符嵌套功能，用于在i大于1、i大于0小于1和i小于0三种情况下给s赋值。
3.3.if(o.filters),判断是否支持filters集合，用来兼容IE浏览器。
3.4.o.filters[0].opacity=i*100;给IE浏览器下的对象o设置透明度。
3.5.o.style.opacity=i;，给其他标准浏览器下的对象o设置透明度。3.6
4.window.onload=function(){}，当文档内容完全加载完成时，再去执行函数中的代码。
5.var odiv=document.getElementById("box");获取id为box的对象。
6.func(odiv);执行函数func()，参数为odiv对象。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=7741

更多内容可以参阅:http://www.softwhy.com/javascript/

javascript如何实现淡入淡出效果

猜你喜欢