<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body,html{
position: relative;
}
.box{
position: fixed;
color: white;
cursor: pointer;
font-weight: 800;
font-size: 35px;
line-height: 100px;
200px;
text-align: center;
background-color:rgba(25,122,15,0.6);
}
.box>.x{
color:firebrick;
position: absolute;
display: inline-block;
font-size:30px;
background-color: #FFA500;
height: 30px;
line-height: 30px;
60px;
left:140px;
bottom: 0px;
transform: translateY(29px);
-webkit-transform: translateY(29px);
}
</style>
</head>
<body>
<div class="box" id="box">
移动广告
<span class="x" id="x"> x </span>
</div>
<script type="text/javascript">
var t1,i=0,j=0,bw,bh,x=0,y=0,flagX=true,flagY=true,flag=false;
bw=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
bh=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
bh=bh-130;
bw=bw-200;
function xx(){
if(flagX){
if(i<bw){
i++;
$("#box").css({'left':i+'px'})
}else{
flagX=!flagX;
}
}else{
if(i>0){
i--;
$(".box").css({'left':i+'px'})
}else{
flagX=!flagX;
}
}
if(flagY){
if(j<bh){
j++;
$("#box").css({'top':j+'px'})
}else{
flagY=!flagY;
}
}else{
if(j>0){
j--;
$(".box").css({'top':j+'px'})
}else{
flagY=!flagY;
}
}
}
t1=setInterval('xx()',1);
$("#x").click(function(){
$(this).parent().hide();
});
$("#box").mouseover(function(){
clearInterval(t1);
})
$("#box").mouseout(function(){
setTimeout(function(){
clearInterval(t1);
t1=setInterval('xx()',1);
},1000)
});
setInterval(function(){
$("#box").css({'display':'block'})
},5000)
$(".x").mousemove(function(){
if(flag){
$(".x").css({'left':"140px"});
flag=!flag;
}else{
$(".x").css({'left':0});
flag=!flag;
}
})
</script>
</body>
</html>
获取浏览器的宽度，盒子在浏览器窗口中无固定轨迹移动；
点击消失按钮，按钮跑到另外一边，除非你手速超级快，按钮才会被你点到；
即使点到按钮，移动盒子消失了，5秒钟后又弹出来了。