收集两种fadeIn和fadeOut的js原生写法

第一种写法

<script type="text/javascript">
window.onload=function(){
//定义基本操作类
    var operrate={
        getId:function(name){return document.getElementById(name);},//获取id
        setOpacity:function(ev,v){ev.filters ? ev.style.filter='alpha(opacity='+v+')':ev.style.opacity=v/100;//设置透明度
        }        
    }
function fadeIn(elem,speed,opacity){
//elem指定的元素
        //spee动画的速度
        //opacityz指定的透明度
        speed=speed||20;//默认为20
        opacity=opacity||100;//默认为100
        elem.style.display="block";//首先将display设为block
        operrate.setOpacity(elem,0);//将透明度设为0.，处于不可见状态
        var val=0;
        (function(){
            operrate.setOpacity(elem,val);
            val+=5;
if(val<opacity){
                setTimeout(arguments.callee,speed);

            }
        })()
    }
function fadeOut(elem, speed, opacity){
        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 elem=document.getElementById("fade");
var btn=document.getElementsByTagName("input")[0];
    btn.onclick=function(){
        fadeIn(elem);    
    }    
}
</script>

第二种写法是按照jQuery的方式来写的

对于符合DOM标准的浏览器来说都支持HTMLElemnt类型，DOM问答结构中所有的元素都继承这个类型,只要给HTMLElemnt类型的原型对象添加方法，则在HTML DOM文档所有的元素都会继承该方法，但是对于IE浏览器却不支持HTMLElemnt类型，从兼容性考虑需要为DOM节点绑定自定义方法

View Code

 1 var DOMextend=function(name,fn){
 2     if(!document.all){
 3         eval("HTMLElement.prototype."+name+"=fn");
 4     }
 5     else{
 6         var _createElement=document.createElement;
 7         document.createElement=function(tag){
 8             var _elem=_createElement(tag);
 9             eval("_elem."+name+"=fn");
10             return  _elem;
11         }
12         var _getElementById=document.getElementById;
13         document.getElementById=function(id){
14             var _elem=_getElementById(id);
15             eval("_elem."+name+"=fn");
16             return  _elem;
17         }
18         var _getElementsByTagName=document.getElementsByTagName;
19         document.getElementsByTagName=function(id){
20             var _arr=_getElementsByTagName(id);
21             for(var i=0;i<_arr.length;i++){
22                 eval("_arr[i]."+name+"=fn");
23             }
24             return  _arr;
25         }
26     }
27         
28 }

接下来是要获取元素的样式，通过在前面给DOM自定义的方法基础上进行添加getStyle方法

View Code

 1 DOMextend("getStyle",function(n){
 2     var _this=this;
 3     if(_this.style[n]){
 4         return _this.style[n];
 5     }else if(_this.currentStyle){
 6         return _this.currentStyle[n];
 7     }
 8     else if(document.defaultView &&document.defaultView.getComputedStyle){
 9         n=n.replace(/(A-Z)/g,"-$1");
10         n=n.toLowerCase();
11         var s=document.defaultView.getComputedStyle(_this,null);
12         if(s){
13             return s.getPropertyValue(n);
14         }
15         
16     }
17     else return null;
18 })

然后设置setOpacity方法来设置透明度

View Code

 1 DOMextend("setOpacity",function(n){
 2         //n为要设置的透明度
 3         var _this=this;
 4         var n=parseFloat(n);//将n转化为浮点数
 5         if(n && (n>100) ||!n) n=100;
 6         if((n<0) && n) n=0;
 7         //_this.filters ? '_this.style.filter=(alpha='+n+')':'_this.style.opacity='+n/100;
 8         if(_this.filters){//兼容IE浏览器
 9             _this.style.filter='(alpha='+n+')';
10         }
11         else{//兼容非IE浏览器
12             _this.style.opacity=n/100;
13         }
14         
15     })

然后是自定义fadeIn方法

View Code

 1 DOMextend("fadeIn",function(time,fn){//自定义逐渐显示的动画方法
 2         var _this=this;
 3         var isShow=_this.getStyle("display");//调用getStyle方法，判断当前元素是否隐藏
 4         if(!isShow=="none"){
 5             return;
 6         }
 7         var t=5;//设置定时器步长为5秒
 8         var step=t*100/time;
 9         var i=0;
10         //为当前元素包裹一个克隆元素，以防止元素在演示过程中突然闪现的问题
11         var box=_this.cloneNode(true);
12         for(var i=0;i<box.length;i++){//清楚所有子节点
13             box.removeChild(box.childNodes[i]);
14         }
15         _this.parentNode.insertBefore(box,_this);//把克隆元素插入到当前元素前面
16         _this=_this.parentNode.removeChild(_this);//删除当前元素
17         box.appendChild(_this);//把当前元素添加到盒子元素中
18         box.style.display="";//显示盒子元素
19         box.setOpacity(0);//设置盒子元素不透明度为0
20         box.style.visibility="hidden";//设置盒子的元素不可见
21         _this.style.display="";//显示当前元素，由于盒子元素不显示，故也看不到
22         var interval=setInterval(function(){//设置定时器
23             box.style.visibility="visible";//设置盒子元素可见
24             box.setOpacity(i);//设置盒子元素的不透明度
25             i+=step;//增加步长
26             if(i>=100){//如果步长大于或等于100，则退出定时器
27                 clearTimeout(interval);//清楚定时器
28                 _this=_this.parentNode.removeChild(_this);//移出当前元素
29                 box.parentNode.insertBefore(_this,box);//把当前元素插入到克隆盒子的前面
30                 box.parentNode.removeChild(box);//移出克隆的盒子
31                 if(fn) //如果存在回调函数则调用
32                     fn();
33             }
34         },t)
35     })

同理fadeOut方法也一样，不过他不需要考虑元素的闪现问题

View Code

 1 DOMextend("fadeOut",function(time,fn){
 2         var _this=this;
 3         var isShow=_this.getStyle("display");
 4         if(isShow=="none"){
 5             return;
 6         }
 7         var t=5;
 8         var step=t*100/time;
 9         var i=100;
10         var interval=setInterval(function(){
11             _this.setOpacity(i);
12             i-=step;
13             if(i<=0){
14                 clearTimeout(interval);
15                 _this.style.display="none";
16             }
17             if(fn) fn();
18         },t)
19     })

感觉在在fadeIn方法中的这段

var box=_this.cloneNode(true);
for(var i=0;i<box.length;i++){//清楚所有子节点
            box.removeChild(box.childNodes[i]);
        }

有点多余只要改为

var box=_this.cloneNode(false);

    if(_this.filters){//兼容IE浏览器
            _this.style.filter='(alpha='+n+')';
        }
else{//兼容非IE浏览器
            _this.style.opacity=n/100;
        }

这段代码改为第一种方式的那种写法更简洁，不过效果都一样

转载于:https://www.cnblogs.com/liupeng110112/archive/2011/08/25/2152862.html