JS 案例 飘浮广告

飘浮广告

要求:

页面两侧有广告,广告上下来回滚动,点击关闭,广告被关闭。

HTML代码片:

<div id="adv_left" class="adv adv_left">
			<span id="left_close">&times;</span>
		</div>
		<div id="adv_right" class="adv adv_right">
			<span id="right_close">&times;</span>
		</div>

CSS代码片:

<style type="text/css">
			body{
				height: 2000px;
			}
			.adv{
				background: url(../img/tx.jpg);
				width: 200px;
				height: 150px;
			}
			.adv_left{
				position: absolute;
				left: 10px;
				top: 10px;
			}
			.adv_right{
				position: absolute;
				right: 10px;
				top: 10px;
			}
			.adv>span{
				position: absolute;
				right: 0;
				top: -12px;
				font-size: 36px;
				color: red;
			}
		</style>

JS代码片:

<script type="text/javascript">
			var adv_left=document.getElementById("adv_left");
			var adv_right=document.getElementById("adv_right");
			var left_close=document.getElementById("left_close");
			var right_close=document.getElementById("right_close");
			left_close.onclick=function(){
				adv_left.style.display="none";
			}
			right_close.onclick=function(){
				adv_right.style.display="none";
			}
			var t=0 ,l=0;
			//获取屏幕的高度
			var h=screen.height;
			var w=screen.width;
			var h1=screen.availHeight;//除了任务栏屏幕的高度
			var w1=screen.availWidth;//除了任务栏屏幕的宽度
			//左右漂浮的广告
			/*function advRight(){
				adv_left.style.left=l+"px";
				adv_right.style.right=l+"px";
				l+=5;
				var timerRight=setTimeout("advRight()",100);
				if(l>screen.availWidth-200){
					clearTimeout(timerRight);
					advLeft();
				}
			}
			advRight();
			function advLeft(){
				adv_left.style.left=l+"px";
				adv_right.style.right=l+"px";
				l-=5;
				var timerLeft=setTimeout("advLeft()",100)
				if(l<0){
					clearTimeout(timerLeft);
					advRight();
				}
			}*/

			// 上下漂浮的广告
			function adv_down(){
				adv_left.style.top=t+"px";
				adv_right.style.top=t+"px";
				t++;
				var timerDown=setTimeout("adv_down()",100);
				if(t>screen.availHeight-180){
					clearInterval(timerDown);
					adv_up();
				}
			}
			adv_down();
			function adv_up(){
				adv_left.style.top=t+"px";
				adv_right.style.top=t+"px";
				t--;
				var timerUp=setTimeout("adv_up()",100)
				if(t<0){
					clearTimeout(timerUp);
					adv_down();
				}
			}
		</script>

效果如下:

在这里插入图片描述


版权声明:本文为suiferq原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。