Html+Css+Js网页页面上广告一直显示，而且一直动来动去（完整代码+详解）

最新推荐文章于 2023-07-11 08:50:22 发布

lucksoul

最新推荐文章于 2023-07-11 08:50:22 发布

阅读量1.9k

点赞数

分类专栏：案例详解步步进心读卷有益 Html JavaScript Css

本文链接：https://blog.csdn.net/qq_38170526/article/details/98208725

版权

案例详解同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

步步进心

8 篇文章 0 订阅

订阅专栏

读卷有益

8 篇文章 0 订阅

订阅专栏

一，问题描述

我们浏览网页时，经常会看到网页上有一些悬浮的广告，而且会飘来飘去。特别是一些盈利的网站，即使你讲网页往下拉，希望以此不看到广告，但是他却很讨人烦的在网页上。所以通过描述我们的悬浮广告要满足一下几个要求;
1 .我们的广告要一直在我们的浏览器可视区域
2 .即使拉动了屏幕的滚动条，广告也会在可视区域内

二，效果预览

在这里插入图片描述

三，用到的主要事件

window.onload：页面加载事件
window.setInterval(moveImg,50)：定时器，指定每隔50毫秒，调用方法moveImg

四，完整代码

代码结构
Html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="../css/advert.css"/>
	<!--<link rel="stylesheet" type="text/css" href="../css/reset.css"/>-->
	<script type="text/javascript" src="../js/advert.js" ></script>
	<body>
		<img src="../images/me_background.jpg" id="ad"/>
	</body>
</html>

Css代码

*{
	margin: 0px;
	padding: 0px;
}
body{
	width: 2048px;
	height: 1024px;
}
#ad{
	position: absolute;
	width: 100px;
	top: 60px;
	left: 40px;
}

JS代码

window.onload=function(){
	ad=document.getElementById("ad");
	getDta=null;
	moveY=1;
	moveX=1;
	timer=null;
	console.log(getData.eleWH(ad).x+" : "+getData.eleWH(ad).y);
	console.log(getData.eleLT(ad).x+" : "+getData.eleLT(ad).y);
	console.log(getData.scrollLT().x+" : "+getData.scrollLT().y);
	console.log(getData.clientWH().x+" : "+getData.clientWH().y);
	startMove();
	
}
/**
 * 定时器刷新界面
 */
function startMove(){
	if(timer==null)
	{
		timer=window.setInterval(moveImg,50);
	}
}
/**
 * 控制图片以偶定的逻辑
 */
function moveImg(){
	/**
	 * 纵坐标移动
	 */
	var top;
	var left;
	if(moveY==1){
	 top=getData.eleLT(ad).y+productRandom();
	}
	if(moveY==-1){
	 top=getData.eleLT(ad).y-productRandom();
	}
	
	if(getData.eleLT(ad).y>getData.clientWH().y+getData.scrollLT().y-getData.eleWH(ad).y){
		moveY=-1;
	}
	if(getData.eleLT(ad).y<=getData.scrollLT().y){
		moveY=1;
	}
	ad.style.top=top+"px";
	
		/**
	 * 横坐标移动
	 */
	if(moveX==1){
	 left=getData.eleLT(ad).x+productRandom();
	}
	if(moveX==-1){
	 left=getData.eleLT(ad).x-productRandom();
	}
	
	if(getData.eleLT(ad).x>getData.clientWH().x+getData.scrollLT().x-getData.eleWH(ad).x){
		moveX=-1;
	}
	if(getData.eleLT(ad).x<=getData.scrollLT().x){
		moveX=1;
	}
	ad.style.left=left+"px";
}
/**
 * 生成随机数
 */
function productRandom(){
	var num=Math.random();
	return Math.floor(num*20);
}


getData={
	/**
	 * 
	 * @param {Object} obj
	 * 获取obj元素的自身width和height
	 */
	eleWH:function(obj){
		var eleW=obj.style.width||document.defaultView.getComputedStyle(obj,null).width;
		var eleH=obj.style.height||document.defaultView.getComputedStyle(obj,null).height;
		//console.log(this)
		//打印出来的this对象就是getData对象
		return new  this.result(parseInt(eleW),parseInt(eleH));
		//将px字符去掉，方便后面的数值计算
		//同时new 关键字不能少，这里的new有点像java里对象的
		//产生，反正理解为调用该函数即可，要不然运行出错，undefined
	}
	,
	/**
	 * 
	 * @param {Object} obj
	 * 获取obj元素的left和top
	 */
	eleLT:function(obj){
		var eleL=obj.style.width||document.defaultView.getComputedStyle(obj,null).left;
		var eleT=obj.style.height||document.defaultView.getComputedStyle(obj,null).top;
		return new this.result(parseInt(eleL),parseInt(eleT));
	}
	,
	/**
	 * 获取滚动条的left和top
	 */
	scrollLT:function(){
		var scrollL=document.documentElement.scrollLeft||document.body.scrollLeft;
		var scrollT=document.documentElement.scrollTop||document.body.scrollTop;
		return new this.result(scrollL,scrollT);
	},
	/**
	 * 获取浏览器的可见区域的width和height
	 */
	clientWH:function(){
		var clientW=document.documentElement.clientWidth;
		var clientH=document.documentElement.clientHeight;
		return new this.result(clientW,clientH);
	},
	result:function(x,y){
	this.x=x;
	this.y=y;
	}
}

//可以将这个函数封装在getData的对象里,只是需要使用关键字this
//function Result(x,y){
//	this.x=x;
//	this.y=y;
//}

五，效果演示

在这里插入图片描述

lucksoul

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
Html+Css+Js网页页面上广告一直显示，而且一直动来动去（完整代码+详解）

一，问题描述我们浏览网页时，经常会看到网页上有一些悬浮的广告，而且会飘来飘去。特别是一些盈利的网站，即使你讲网页往下拉，希望以此不看到广告，但是他却很讨人烦的在网页上。所以通过描述我们的悬浮广告要满足一下几个要求;1 .我们的广告要一直在我们的浏览器可视区域2 .即使拉动了屏幕的滚动条，广告也会在可视区域内二，效果预览三，用到的主要事件window.onload：页面加载...
复制链接

扫一扫

专栏目录