一,问题描述
- 我们浏览网页时,经常会看到网页上有一些悬浮的广告,而且会飘来飘去。特别是一些盈利的网站,即使你讲网页往下拉,希望以此不看到广告,但是他却很讨人烦的在网页上。所以通过描述我们的悬浮广告要满足一下几个要求;
1 .我们的广告要一直在我们的浏览器可视区域
2 .即使拉动了屏幕的滚动条,广告也会在可视区域内
二,效果预览
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190802160915670.gif)
三,用到的主要事件
- window.onload:页面加载事件
- window.setInterval(moveImg,50):定时器,指定每隔50毫秒,调用方法moveImg
四,完整代码
- 代码结构
![在这里插入图片描述](https://img-blog.csdnimg.cn/2019080216140535.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTcwNTI2,size_16,color_FFFFFF,t_70)
- Html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<link rel="stylesheet" type="text/css" href="../css/advert.css"/>
<script type="text/javascript" src="../js/advert.js" ></script>
<body>
<img src="../images/me_background.jpg" id="ad"/>
</body>
</html>
*{
margin: 0px;
padding: 0px;
}
body{
width: 2048px;
height: 1024px;
}
#ad{
position: absolute;
width: 100px;
top: 60px;
left: 40px;
}
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={
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;
return new this.result(parseInt(eleW),parseInt(eleH));
}
,
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));
}
,
scrollLT:function(){
var scrollL=document.documentElement.scrollLeft||document.body.scrollLeft;
var scrollT=document.documentElement.scrollTop||document.body.scrollTop;
return new this.result(scrollL,scrollT);
},
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;
}
}
五,效果演示
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190802162016514.gif)