简易的上升式广告。

最新推荐文章于 2025-07-22 17:09:18 发布

原创最新推荐文章于 2025-07-22 17:09:18 发布 · 388 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #JS #Js #广告

javascript&html 专栏收录该内容

23 篇文章

订阅专栏

学习了定时器的相关知识，就写了个上升式的广告，就是在右下角出现的那种上升式的广告，可以取消的那种，效果如下（IE有点小瑕疵）：

源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>上升式广告图x2.0</title>
</head>

<body>
<div style="width:300px;height:170px;overflow:hidden;position:absolute;top:0;left:0;" id="po">
<div style="width:300px;height:170px;background-color:#CCC;position:absolute;top:0;left:0;margin-top:0px" id="ad">我是广告
<input type="button" value="X" id="btn" style="float:right;" id="btn">
</div>

</div>

<script>
/*************************************************/
var EventUtil={
	addHandler:function(element,type,handler){
		if(element.addEventListener){
			element.addEventListener(type,handler,false);
			}else if(element.attachEvent){
				element.attachEvent("on"+type,handler);
				}else{
					element["on"+type]=handler;
					}
		
		}
,
	removeHandler:function(element,type){
		handler=function(){
			}
		if(element.removeEventListener){
			element.removeEventListener(type,handler,false);
			}else if(element.detachEvent){
				element.detachEvent("on"+type,handler);
				}else{
					element["on"+type]=null;
					}
		
		}
,
//跨浏览器事件对象
getEvent:function(){
	return event?event:window.event;
	}
,
getTarget:function(event){
	return event.target||event.srcElement;
	}
,
preventDefault:function(event){
	if(event.preventDefault){
		event.preventDefault();
		}else{
			event.returnValue=false;
			}
	}
,
stopPropagation:function(event){
	if(event.stopPropagation){
		event.stopPropagation();
		}else{
			event.cancelBubble=true;
			}
	}
	}
;
/*************************************************/

var ad=document.getElementById("ad");
var po=document.getElementById("po");
var btn=document.getElementById("btn");

var browserWidth=document.documentElement.clientWidth;
var browserHeight=document.documentElement.clientHeight;
var adWidth=ad.offsetWidth;
var adHeight=ad.offsetHeight;
//确定广告框的位置
po.style.top=(browserHeight-po.offsetHeight)+"px";
po.style.left=(browserWidth-po.offsetWidth)+"px";
//给定广告的margin-top;
var distance=adHeight;
ad.style.marginTop=distance+"px";

up=setInterval(function(){
	var speed=2;
	distance-=speed;
	ad.style.marginTop=distance+"px";
	if(distance<=0){
		clearInterval(up);
		}
	}
,10);

function down(){
	down=setInterval(function(){
		var speed=2;
		distance+=speed;
		ad.style.marginTop=distance+"px";
		if(distance>=po.offsetHeight){
			clearInterval(down);
		}
		},10);
	}
EventUtil.addHandler(btn,"click",down);
</script>

</body>
</html>