用js完成悬浮广告的完整版

来源：互联网发布：淘宝发货时间怎么看编辑：程序博客网时间：2024/05/29 15:15

原理就不多说了，跟上篇是一样的，这是这个又加了一个方向而已，下面是代码供大家参考

<!DOCTYPE html><HTML><head>    <meta charset="utf-8">    <style>        #mv{width:200px;      height:200px;      background-color:pink;        position:absolute      }    </style>    <script>      var obj=null;      var x =10;      var y =10;      var changeheight=true;      var changewidth =true;      function init(){      obj=document.getElementById("mv");      alert(parseInt(obj.style.top));      setInterval(move,100);      }      function move(){         var height = document.documentElement.clientHeight-obj.offsetHeight;         var width = document.documentElement.clientWidth-obj.offsetWidth;         if(changeheight && changewidth){             //长和高都增加的时候             if(x>=width){                 changewidth=false;             }else if(y>=height){                 changeheight=false;             }else{                 x+=14;y+=10;                 obj.style.left=x+"px";                 obj.style.top=y+"px";             }         }else if (changeheight && !changewidth){             //长减少高增加              if(x<=10){                 changewidth=true;             }else if(y>=height){                 changeheight=false;             }else{                 x-=14;y+=10;                 obj.style.left=x+"px";                 obj.style.top=y+"px";             }         }else if(!changeheight && changewidth){             //长增加高减少             if(x>=width){                 changewidth=false;             }else if(y<10){                 changeheight=true;             }else{                 x+=14;y-=10;                 obj.style.left=x+"px";                 obj.style.top=y+"px";             }         }else{             //长和高都减少             if(x<10){                 changewidth=true;             }else if(y<10){                 changeheight=true;             }else{                 x-=14;y-=10;                 obj.style.left=x+"px";                 obj.style.top=y+"px";             }         }      }   </script></head><body onload="init()"><div id="mv" style="top:10px"></div></body></HTML>

0 0