JavaScript实现动态广告弹出框
2014-05-09 23:34
447 查看
<!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的位置需要给她一个图片。
相关文章推荐
- setInterval()和setTimeout()的用法和区别示例介绍
- alert中断settimeout计时功能
- setTimeout()与setInterval()方法区别介绍
- setTimeout的延时为0时多个浏览器的区别
- javascript setTimeout和setInterval计时的区别详解
- 定时器(setTimeout/setInterval)调用带参函数失效解决方法
- 关于setInterval、setTimeout在jQuery中的使用注意事项
- setTimeout函数兼容各主流浏览器运行执行效果实例
- setTimeout和setInterval的深入理解
- js setTimeout 常见问题小结
- js setTimeout实现延迟关闭弹出层
- js setTimeout()函数介绍及应用以倒计时为例
- javascript 不停(setInterval)/延时(setTimeout)函数使用实例
- setInterval 和 setTimeout 用法
- setTimeout-的执行时机
- HTML DOM setInterval() 方法
- js中setTimeout的使用
- javascript setTimeout 0
- setInterval的返回值类型为什么为数值?
- js的setTimeout使用问题