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

转载 2015年07月07日 16:12:45
<!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>

原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo) (转http://www.cnblogs.com/mrthink/archive/2011/01/29/1947532.html)

原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,...
  • fjfdszj
  • fjfdszj
  • 2011年01月30日 10:36
  • 697

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

用法: $("button").click(function(){ $("p").fadeOut(); }); fadeOut() 方法逐渐改变被选元素的不透明度,从可见到隐藏(褪色效果)。 注...

图片轮播 js原生(淡入淡出)

  • 2016年05月20日 11:45
  • 6KB
  • 下载

jQuery动画效果(show与hide/toggle/slideUp/slideToggle/fadeIn/fadeTo)

1、show()与hide() show()和hide()方法用于显示或隐藏页面中的元素,它的调用格式分别为: $(selector).hide(speed,[callback])和$(selecto...

js实现轮播图--淡入淡出的效果。

window.onload = function(){ mv.app.toBanner(); }; var mv = {}; mv.tools = {}; mv.ui = {}; //淡入淡出也算...

[ javascript ] 司徒正美的fadeOut-fadeIn效果!

首先感谢司徒大神的文章:http://www.cnblogs.com/rubylouvre/archive/2009/09/14/1566157.html 在司徒大神的博客看到一个简单的渐入渐出的效果...

jQuery-动画效果animate() slideDown() slideUp() fadeIn() fadeOut()

JQuery动画 以下JS代码公用的HTML:   Show:Paragraph 2 Show:Paragraph 2...

jQuery学习21---简单动画效果,show,hide,slideUp,slideDown,fadeOut,fadeIn

show(),hide()如果不带参数,则立即显示,或隐藏,如果指定速度参数则会 用指定时间进行动态显示,隐藏,单位为毫秒,也可以使用三个内置的速度 fast(200ms) slow(600ms)...

消息提示框淡入淡出效果js类

为了使用户明白每一步操作的结果,并抛弃传统的页面固定位置给出消息提示,提高用户体验,特此参考网上一些消息框淡入淡出效果的做法,完成适合自己的消息提示框淡入淡出效果类。效果如下图所示:        ...
  • Ylxin
  • Ylxin
  • 2012年09月16日 23:54
  • 2367

jQuery实现淡入淡出效果

  • 2016年12月15日 14:47
  • 3KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)
举报原因:
原因补充:

(最多只允许输入30个字)