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

一,问题描述


  • 我们浏览网页时,经常会看到网页上有一些悬浮的广告,而且会飘来飘去。特别是一些盈利的网站,即使你讲网页往下拉,希望以此不看到广告,但是他却很讨人烦的在网页上。所以通过描述我们的悬浮广告要满足一下几个要求;
    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;
//}

五,效果演示


在这里插入图片描述

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值