• 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>
    
    请用今天的努力,让明天没有遗憾。
  • 相关阅读:
    JQuery学习笔记(1)——选择器
    Web前端——表单提交和Js添加选项
    Web前端——JavaScript练习
    Web前端——css
    Web前端——JavaScript笔记
    sirius的学习笔记(2)
    sirius的python学习笔记(1)
    Get和Post的请求
    IIS的配置
    一般处理程序aspx
  • 原文地址:https://www.cnblogs.com/cupid10/p/12870945.html
Copyright © 2020-2023  润新知