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

最新推荐文章于 2022-03-09 14:21:55 发布

weixin_30257433

最新推荐文章于 2022-03-09 14:21:55 发布

阅读量118

点赞数

原文链接：http://www.cnblogs.com/dongxiaolei/p/7047279.html

版权

<!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>