js 用div模拟广告弹出框

代码:自动弹出框,3秒之后消失

       <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                #box{
                     300px;
                    height: 330px;
                    background-color: pink;
                    position: fixed;
                    right: 10px;
                   
                }
                img{
                float:left;
                180px;
                height:180px;
                }

        </style>
    </head>
    <body>
        <div id="box">
            <img src="1,jpg">
           
                身作彩凤双飞翼,心有灵犀一点通。
                最美好的年华,与你携手共度。(登场音效)
                凤凰鸣矣,于彼高岗;梧桐生矣,于彼朝阳。
                浴火涅磐,唯求清风明月共天涯。
                见过彼岸无尽的红莲,如同你我相思蔓延。
                生生世世若初见,相思长守。
                倾覆了故国,惊醒镜花水月。
                死亡本是轮回的归宿,因所爱而无畏。
                看出来了,你五行缺真爱。
                等待再世的重逢。
                再无涅槃。 <br>
                             - 凤凰于飞
       </div>
  </body>
    <script>

    window.onload=function(){
	init();
}
	var bottomPosition=-550;
	function init(){
		var divNode = document.getElementById("box");
		divNode.style.bottom=bottomPosition+"px";
		bottomPosition+=3;
		if(bottomPosition<50){
			setTimeout(init,0);
		}
	}
    var obox=document.getElementById("box");
       setTimeout (function(){
           obox.style.display="none";
       },5000)
    </script>
    </html>
请用今天的努力,让明天没有遗憾。
原文地址:https://www.cnblogs.com/cupid10/p/12870945.html