HTML+JS 回弹动态广告

最新推荐文章于 2024-06-28 11:30:00 发布

呀灯灯

最新推荐文章于 2024-06-28 11:30:00 发布

阅读量154

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/weixin_44283098/article/details/134130073

版权

效果实现：
在网页中实现广告浮动在网页内容上面，并不断运动。
①在碰到网页内容边界时，能“弹回”并继续运动。
②当鼠标放在广告上时，广告停止运动；
③当鼠标离开广告时，广告继续运动。用户能单击广告上的关闭图标关闭广告
在这里插入图片描述

<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>浮动广告</title>
<style>
	#ad
	{
		width:313px;
		height:132px;
		position:absolute;
		top:13px;
		left:0;	
	}

	#closeIcon
	{
		position:absolute;
		top:-13px;
		right:0;
	}
</style>
<script>
var ad;				//广告层
var closeIcon;		//关闭图标
var myStyle;			//广告层的样式对象
var intID;			//定时调用标识
var adWidth;			//广告层宽度
var adHeight;		//广告层高度
var adTop;			//广告层top
var adLeft;			//广告层left
var stepTop = 2;		//top每次增量
var stepLeft = 2;	//left每次增量
window.onload = function()
{
	//查找节点
	ad = document.getElementById("ad");
	closeIcon = document.getElementById("closeIcon");
	//取出样式对象
	myStyle = ad.currentStyle ? ad.currentStyle : document.defaultView. getComputedStyle(ad, null);
	//获取广告层宽高和定位
	adWidth = parseInt(myStyle.width);
	adHeight = parseInt(myStyle.height);
	adTop = parseInt(myStyle.top);
	adLeft = parseInt(myStyle.left);
	
	//启动定时调用,每30毫秒调用一次move()
	intID = window.setInterval("move()",30);
	
	//广告层的鼠标悬停效果
	ad.onmouseover = function(){
		//停止定时调用
		window.clearInterval(intID);
	};
	ad.onmouseout = function(){
		//重新启动定时调用
		intID = window.setInterval("move()",30);
	};
	closeIcon.onclick = function(){
		//停止定时调用
		window.clearInterval(intID);
		//隐藏广告层
		ad.style.display = "none";
  };
	}
	//改变广告层的定位
	function move()
	{
	     adTop = adTop + stepTop;
		adLeft = adLeft + stepLeft;
	
	     //重新设置广告层的定位,注意加单位
	     ad.style.top = adTop + "px";
	     ad.style.left = adLeft + "px";	
	
	     //广告层右边框达到网页最右侧或最左侧
	if(adLeft >= document.body.clientWidth-adWidth || adLeft <= 0 )
		     stepLeft = -1*stepLeft;
	//广告层底边框到达网页最底部或最顶部
	if(adTop >= document.body.clientHeight-adHeight || adTop <= 0)
		     stepTop = -1*stepTop;	//取反,正变负或负变正
}

</script>
</head>
<body>
<div id = "ad">
	<img id = "closeIcon" src = "imgs/close2.png" width = "13" height = "13">
	<img src = "imgs/zph2019.png" width = "313" height = "132">
</div>
<div>
内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>
</div>
</body>
</html>