流氓广告
Posted daifuchao
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了流氓广告相关的知识，希望对你有一定的参考价值。
<!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; width: 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; width: 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秒钟后又弹出来了。
以上是关于流氓广告的主要内容，如果未能解决你的问题，请参考以下文章