码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript实现动态广告弹出框

时间:2014-05-10 04:49:23      阅读:375      评论:0      收藏:0      [点我收藏+]

标签:settimeout   setinterval   

<!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实现动态广告弹出框,布布扣,bubuko.com

JavaScript实现动态广告弹出框

标签:settimeout   setinterval   

原文地址:http://blog.csdn.net/hymking/article/details/25434173

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!