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

柔情只为你懂 2022-08-03 11:58 130阅读 0赞

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

<!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 οnlοad="init()">
    <div id="mv" style="top:10px">
    </div>
    </body>
    
    </HTML>