zoukankan      html  css  js  c++  java
  • 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>
    请用今天的努力,让明天没有遗憾。
  • 相关阅读:
    html常用标签与扩展(标签语义化、Doctype)
    html认识
    兼容性问题统计
    最短的包含字符串 (尺取法)
    与7 无关的数(前缀和)
    子序列(尺取入门)
    孪生素数
    vector 详解
    进制转换(高级版^^)
    容斥 mobius反演
  • 原文地址:https://www.cnblogs.com/cupid10/p/15617781.html
Copyright © 2011-2022 走看看