实现滑入划出逐渐透明特效

来源：互联网发布：?+?=123风靡网络编辑：程序博客网时间：2024/05/01 18:31
<!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"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>渐渐滑出透明弹出层带有关闭按钮特效</title>    <style>        *{padding:0;margin:0;}        img{border:none;}        a{text-decoration:none;}        .PopupLayer{width:600px;height:400px;top:125px;padding:10px;position:fixed;left:50%;margin-left:-300px;background:#fff;background-clip:padding-box;border-radius:10px;border:10px solid #666;border:15px solid rgba(0,0,0,0.2);}        .PopupLayer a.close{display:block;width:30px;height:30px;float:right;background:url(images/close.jpg) no-repeat;overflow:hidden;}        .PopupLayer a.close:hover{background-position:-30px;}        .PopupLayer p{font:13px "宋体";line-height:30px;letter-spacing:0.1em;margin-top:35px;}        .PopupLayer p span{color:#7d7d7d;}        .PopupLayer ul{list-style:none;width:475px;height:103px;margin:30px auto 0;border:1px dashed #e4e4e4;overflow:hidden;}        .PopupLayer ul li{float:left;width:95px;height:103px;overflow:hidden;}        .PopupLayer ul li a{display:block;}        .PopupLayer a.btn{display:block;width:100px;height:38px;line-height:38px;text-align:center;color:#fff;font-weight:bold;letter-spacing:0.1em;float:right;background:url(images/btn_bg.jpg) repeat-x;border-radius:8px;margin:40px 30px 0 0;}        .btn_content{ margin:50px auto;top:327px;width:204px;height:25px;}        .btn_content button{width:100px;height:25px;line-height:25px;background:#F60;border:1px solid #989898;margin-right:2px;}        .btn_content button:hover{color:#fff;}    </style>    <script type="text/javascript">       var a = 1;       var b = -600;       var c = 120;       var clear;       function slideIn(){           var block = document.getElementsByClassName('PopupLayer')[0];           if(block.style.opacity < 0){               block.style.top = -600+'px';               block.style.opacity = 1;           }           clear = setInterval(function(){               block.style.top = b + 'px' ;               b += 10;               if(b > 130){                   b = -600;                   clearInterval(clear);               }               //console.log(b);           },20);       }       function slideOut(){           var block = document.getElementsByClassName('PopupLayer')[0];           clear = setInterval(function(){               block.style.top = c + 'px' ;               c -= 10;               if(c < -600){                   c = 120;                   clearInterval(clear);               }           },20);       }        function transparent(){            var block = document.getElementsByClassName('PopupLayer')[0];            block.style.opacity = a;            a-=0.1;            if(a <=-0.1){                a = 1;                clearInterval(clear);            }        }        function close(x){             clear = setInterval(transparent,100);        }        function init(){            var x = document.getElementsByClassName('close')[0];            var open = document.getElementById('open');            var close1 = document.getElementById('close');            x.addEventListener('click',close,false);            open.addEventListener('click',slideIn,false);            close1.addEventListener('click',slideOut,false) ;        }    </script></head><body onload="init()"><div class="btn_content">    <button style="float:left" id="open">弹出</button>    <button style="float:left" id="close">折叠</button></div><div class="PopupLayer"> <a class="close"></a>    <p> 比尔盖茨发现你正在用IE浏览器，紧紧握住您的手，使劲儿的那个摇。 <br />        拉里▪佩吉发现您正在用IE浏览器，耸了一下肩，摇头笑笑。 <br />        乔布斯发现您正在用IE浏览器，打算从天国下来和你聊聊。 <br />        我们发现您正在用IE浏览器，打算给您点建议： <span>亲！在下面挑一个新款浏览器升级吧！</span> </p>    <ul>        <li class="ab"><a href="https://www.xwcms.net/" title="下载谷歌浏览器"><img src="images/chrome.jpg" /></a></li>        <li class="ab"><a href="http://www.xwcms.net/" title="下载火狐浏览器"><img src="images/firefox.jpg" /></a></li>        <li class="ab"><a href="http://www.xwcms.net/" title="下载Safair浏览器"><img src="images/safair.jpg" /></a></li>        <li class="ab"><a href="http://www.xwcms.net/" title="下载Opera浏览器"><img src="images/opera.jpg" /></a></li>        <li><a href="http://www.xwcms.net/" title="下载IE9浏览器"><img src="images/ie9.jpg" /></a></li>    </ul>    <a class="btn" href="#.">我知道了</a> </div></body></html>
附件地址 http://pan.baidu.com/s/1gd65DPx
0 0