<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> div{ width: 300px; height: 300px; border:1px red solid; position: fixed;/*相对于浏览器窗口进行定位*/ right: 5px; } img{ float:left; width:180px; height:180px; } </style> <script type="text/javascript"> /*两个定时器函数的区别: * setTimeout(表达式,时间间隔):经过一次时间间隔执行一次表达式----只执行一次 setInterval(表达式,时间间隔):每经过一次时间间隔执行一次表达式----执行无限次 setTimeout可以通过回调函数本身就ok了,在下面的代码中有所体现哦 */ window.onload=function(){ init(); } //设置div的bottom的值,是指div的底部距离它的最临近的父元素之间的距离 var bottomPosition=-550; function init(){ //因为整个文档中有只有一个div,所有通过这种方式获取了存储图片的div了 var divNode = document.getElementsByTagName("div")[0]; //设置了bottom属性,使得开始加载的时候这个div是看不到的 divNode.style.bottom=bottomPosition+"px"; bottomPosition+=1;//没启动这个函数位置就会向上移动一个像素。 if(bottomPosition<50){ //间隔10毫秒启动这个函数 setTimeout(init,10); } } //添加一个关闭按钮 function closeAdv(){ var divNode = document.getElementsByTagName("div")[0]; divNode.style.display="none"; } </script> </head> <body> <div> <input onclick="closeAdv();"/> <img src="3.jpg">胡哥是个传说胡哥是个传说胡哥是个传说胡哥是个传说 胡哥是个传说 胡哥是个传说,胡哥是个传说,胡哥是个传说 胡哥是个传说 胡哥是个传说,胡哥是个传说,胡哥是个传说 胡哥是个传说胡哥是个传说 胡哥是个传说 胡哥是个传说,胡哥是个传说,胡哥是个传说 </div> </body> </html>
注意:这里面3.jpg的位置需要给她一个图片。
JavaScript实现动态广告弹出框
时间: 2024-10-08 19:35:00