黑帽联盟

标题: JS实现悬浮移动窗口(悬浮广告)的特效 [打印本页]
作者: heimao    时间: 2017-2-26 19:50
标题: JS实现悬浮移动窗口(悬浮广告)的特效
页面加载完成之后向页面插入窗口，之后向窗口插入关闭按钮，使用setInterval()函数触发moves（）函数开始动画

js方法：
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3.     <head>
  4.         <title> New Document </title>
  5.         <meta name="Generator" content="EditPlus">
  6.         <meta name="Author" content="">
  7.         <meta name="Keywords" content="">
  8.         <meta name="Description" content="">
  9.         <script type="text/javascript">
  10.             window.onload=function(){
  11.                 //写入
  12.                 var oneInner = document.createElement("div");
  13.                 oneInner.setAttribute("style","background:#663398;position:absolute;width:100px;height:100px;border:solid 3px #2F74A7;cursor:pointer;");
  14.                 var oneButton = document.createElement("input");
  15.                 oneButton.setAttribute("type","button");
  16.                 oneButton.setAttribute("value","x");
  17.                 if (oneButton.style.cssFloat)
  18.                 {
  19.                     oneButton.style.cssFloat="right"
  20.                 }
  21.                 else
  22.                 {oneButton.style.styleFloat="right"}
  23.                 oneInner.appendChild(oneButton);
  24.                 document.body.appendChild(oneInner);

  26.                 //定时器
  27.                 var a1a = setInterval(moves,100);
  28.                 //函数
  29.                 var x = 10;
  30.                 var y = 10;
  31.                 function moves(){
  32.                     var tops = oneInner.offsetTop
  33.                     var lefts = oneInner.offsetLeft
  34.                     if (lefts>=document.documentElement.clientWidth-oneInner.offsetWidth||lefts<=0)
  35.                     {
  36.                         x=-x
  37.                     }
  38.                     if (tops>=document.documentElement.clientHeight-oneInner.offsetHeight||tops<=0)
  39.                     {
  40.                         y=-y
  41.                     }

  43.                     tops+=y;
  44.                     lefts+=x;
  45.                     oneInner.style.top=tops+"px"
  46.                     oneInner.style.left=lefts+"px"
  47.                 }
  48.                 //悬停停止
  49.                 oneInner.onmouseover=function(){
  50.                     clearInterval(a1a);
  51.                 }
  52.                 //放手继续运动
  53.                 oneInner.onmouseout=function(){
  54.                     a1a =setInterval(moves,100);
  55.                 }
  56.                 //删除
  57.                 oneButton.onclick=function(){
  58.                     document.body.removeChild(oneInner);
  59.                 }
  60.             }
  61.         </script>
  62.     </head>
  63.     <body>

  65.     </body>
  66. </html>
复制代码
jquery方法：
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title></title>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.         <script type="text/javascript" src="https://bbs.cnblackhat.com/js/jquery-1.7.min.js"></script>
  7.         <script>
  8.             $(function(){
  9.                 //写入div
  10.                 $("<div/>",{id:"moveWindow"}).css({width:"200px",height:"200px",border:"solid 3px #2F74A7",background:"#663398",position:"absolute",cursor:"pointer"}).appendTo("body");
  11.                 //写入关闭按钮
  12.                 $("<div/>",{id:"removeMW"}).css({width:"20px",height:"20px",background:"red",float:"right"}).appendTo("#moveWindow");
  13.                 //定时器
  14.                 var move = setInterval(moves,100);
  15.                 var x= 10;
  16.                 var y= 10;

  18.                 function moves (){
  19.                     var mw = $("#moveWindow").offset();
  20.                     var lefts =mw.left;
  21.                     var tops = mw.top;
  22.                     if (lefts>=$(window).width()-$("#moveWindow").width()||lefts<=0)
  23.                     {
  24.                         x=-x
  25.                     }
  26.                     if (tops>=$(window).height()-$("#moveWindow").height()||tops<=0)
  27.                     {
  28.                         y=-y
  29.                     }
  30.                     lefts+=x;
  31.                     tops+=y;

  33.                     $("#moveWindow").offset({top:tops,left:lefts});

  35.                 }
  36.                 //悬停停止运动
  37.                 $("#moveWindow").mouseover(function(){
  38.                     clearInterval(move);
  39.                 });
  40.                 //移开鼠标后继续运动
  41.                 $("#moveWindow").mouseout(function(){
  42.                     move = setInterval(moves,100);
  43.                 });
  44.                 //点击按钮关闭
  45.                 $("#removeMW").click(function(){
  46.                     $("#moveWindow").remove();
  47.                 });
  48.             })
  49.         </script>
  50.     </head>
  51.     <body>
  52.     </body>
  53. </html>
复制代码
效果展示：
js悬窗




欢迎光临 黑帽联盟 (https://bbs.cnblackhat.com/) Powered by Discuz! X2.5