首页 > 代码库 > JavaScript实现动态广告弹出框
JavaScript实现动态广告弹出框
<!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=http://www.mamicode.com/"3.jpg">胡哥是个传说胡哥是个传说胡哥是个传说胡哥是个传说>注意:这里面3.jpg的位置需要给她一个图片。
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。