原生js模仿jq fadeIn fadeOut效果兼容IE低版本

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

    </style>

    <script>

        window.onload=function(){

            var certify=document.getElementById("jvs-certify"),certifyOuter=document.createElement("div"),certifyImg1=document.createElement("img"),certifyImg2=document.createElement("img");

            certifyOuter.id="jvs-certifyOuter";

            certifyOuter.className="jvs-certifyOuter";

            certifyOuter.style.width="100%";

            certifyOuter.style.position="relative";

            certifyImg1.src = "01.png";

            certifyImg1.id = "certify-img1";

            certifyImg1.className = "act";

            certifyImg1.style.position = "absolute";

            certifyImg1.style.left = "0";

            certifyImg1.style.top = "0";

            certifyImg1.style.display = "block";

            certifyImg1.style.width = "100%";

            certifyImg1.style.height = "auto";

            certifyImg1.style.opacity = "1";

            certifyImg1.style.border = "none";

            certifyImg1.style.filter = "Alpha(opacity=100)";

            certifyImg2.src = "02.png";

            certifyImg2.id = "certify-img2";

            certifyImg2.className = "act";

            certifyImg2.style.position = "absolute";

            certifyImg2.style.left = "0";

            certifyImg2.style.top = "0";

            certifyImg2.style.display = "block";

            certifyImg2.style.width = "100%";

            certifyImg2.style.height = "auto";

            certifyImg2.style.opacity = "0";

            certifyImg2.style.border = "none";

            certifyImg2.style.filter = "Alpha(opacity=0)";

            certify.appendChild(certifyOuter);

            certifyOuter.appendChild(certifyImg1);

            certifyOuter.appendChild(certifyImg2);

            var timer=null,timer1=null,timer2=null;

            function clear(time){

                time=null;

                clearInterval(time)

            }

            function hasClass( elements,cName ){

                return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") );

            }

            function addClass( elements,cName ){

                if( !hasClass( elements,cName ) ){

                    elements.className += " " + cName;

                }

            }

            function removeClass( elements,cName ) {

                if (hasClass(elements, cName)) {

                    elements.className = elements.className.replace(new RegExp("(\\s|^)" + cName + "(\\s|$)"), " ");

                }

            }

            function fadeIn(elem){

                setOpacity(elem,0);

                for(var i = 0;i<=20;i++){

                    (function(){

                        timer1=null;

                        clearTimeout(timer1);

                        var level = i * 5;

                        timer1=setTimeout(function(){

                            setOpacity(elem, level)

                        },i*25);

                    })(i);

                }

            }

            function fadeOut(elem){

                for(var i = 0;i<=20;i++){

                    (function(){

                        timer2=null;

                        clearTimeout(timer2);

                        var level = 100 - i * 5;

                        timer2=setTimeout(function(){

                            setOpacity(elem, level)

                        },i*25);

                    })(i);

                }

            }

            function setOpacity(elem,level){

                if(elem.filters){

                    elem.style.filter = "alpha(opacity="+level+")";

                }else{

                    elem.style.opacity = level / 100;

                }

            }

            function jvsShow(){

                var certifyImg=document.getElementById("certify-img1"),certifyMsg=document.getElementById("certify-img2"),hasAct=hasClass(certifyImg,"act");

                if(hasAct){

                    fadeOut(certifyImg);

                    fadeIn(certifyMsg);

                    removeClass(certifyImg,"act");

                    addClass(certifyMsg,"act");

                }else{

                    addClass(certifyImg,"act");

                    removeClass(certifyMsg,"act");

                    fadeOut(certifyMsg);

                    fadeIn(certifyImg);

                }

            }

            timer=window.setInterval(function(){

                clear(timer);

                jvsShow()

            },3000);

        }

    </script>

</head>

<body>

<div class="aa" style="width:200px;margin:20px auto">

    <a style="width:100%;max-width: 199px;" href="javascript:void (0);" target="_blank" id="jvs-certify"></a>

</div>

</body>

</html>
原生js模仿jq fadeIn fadeOut效果 兼容IE低版本

原生js模仿jq fadeIn fadeOut效果兼容IE低版本
