关闭

原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)

192人阅读 评论(0) 收藏 举报
分类:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>原生JS实现淡入淡出效果</title>
<style>
/*demo css*/
#demo div.box {float:left;width:31%;margin:0 1%}
#demo div.box h2{margin-bottom:10px}
#demo div.box h2 input{padding:5px 8px;font-size:14px;font-weight:bolder}
#demo div.box div{text-indent:10px; line-height:22px;border:2px solid #555;padding:0.5em;overflow:hidden}
</style>
<script>
/**
 * @author Mr.Think
 * @author blog http://mrthink.net/
 * @2011.01.27
 * 可自由转载及使用,但请注明版权归属
 */
window.onload = function(){
//底层共用
    var iBase = {
        Id: function(name){
            return document.getElementById(name);
        },
//设置元素透明度,透明度值按IE规则计,即0~100
        SetOpacity: function(ev, v){
            ev.filters ? ev.style.filter = 'alpha(opacity=' + v + ')' : ev.style.opacity = v / 100;
        }
    }
//淡入效果(含淡入到指定透明度)
function fadeIn(elem, speed, opacity){
/*
* 参数说明
* elem==>需要淡入的元素
* speed==>淡入速度,正整数(可选)
* opacity==>淡入到指定的透明度,0~100(可选)
*/
   speed = speed || 20;
   opacity = opacity || 100;
//显示元素,并将元素值为0透明度(不可见)
   elem.style.display = 'block';
   iBase.SetOpacity(elem, 0);
//初始化透明度变化值为0
   var val = 0;
//循环将透明值以5递增,即淡入效果
   (function(){
       iBase.SetOpacity(elem, val);
       val += 5;
       if (val <= opacity) {
           setTimeout(arguments.callee, speed)
       }
   })();
}

//淡出效果(含淡出到指定透明度)
function fadeOut(elem, speed, opacity){
/*
* 参数说明
* elem==>需要淡入的元素
* speed==>淡入速度,正整数(可选)
* opacity==>淡入到指定的透明度,0~100(可选)
*/
   speed = speed || 20;
   opacity = opacity || 0;
   //初始化透明度变化值为0
   var val = 100;
//循环将透明值以5递减,即淡出效果
   (function(){
       iBase.SetOpacity(elem, val);
       val -= 5;
       if (val >= opacity) {
           setTimeout(arguments.callee, speed);
       }else if (val < 0) {
//元素透明度为0后隐藏元素
           elem.style.display = 'none';
       }
   })();
}
    
    
    var btns = iBase.Id('demo').getElementsByTagName('input');
    
    btns[0].onclick = function(){
        fadeIn(iBase.Id('fadeIn'));
    }
    btns[1].onclick = function(){
        fadeOut(iBase.Id('fadeOut'),40);
    }
    btns[2].onclick = function(){
        fadeOut(iBase.Id('fadeTo'), 20, 10);
    }
    
}
</script>
</head>
<body>


<!--DEMO start-->
<div id="demo">
<div class="box">
<h2><input type="button" value="点击淡入" /></h2>
<div id="fadeIn" style="display:none">
<p>Name:Mr.Think</p>
<p>Blog:http://mrthink.net</p>
<p>Date:2011.01.27</p>
</div>
<p>欲求文明之幸福,不得不经文明之痛苦.</p>
</div>

<div class="box">
<h2><input type="button" value="点击淡出" /></h2>
<div id="fadeOut">
<p>Name:Mr.Think</p>
<p>Blog:http://mrthink.net</p>
<p>Date:2011.01.27</p>
</div>
<p>欲求文明之幸福,不得不经文明之痛苦.</p>
</div>

<div class="box">
<h2><input type="button" value="点击淡出至指定透明度" /></h2>
<div id="fadeTo">
<p>Name:Mr.Think</p>
<p>Blog:http://mrthink.net</p>
<p>Date:2011.01.27</p>
</div>
<p>欲求文明之幸福,不得不经文明之痛苦.</p>
</div>
</div>
<!--DEMO end-->


</body>
</html>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:27479次
    • 积分:530
    • 等级:
    • 排名:千里之外
    • 原创:23篇
    • 转载:25篇
    • 译文:0篇
    • 评论:3条
    最新评论