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

最新推荐文章于 2024-03-15 11:32:13 发布

韩利鹏

最新推荐文章于 2024-03-15 11:32:13 发布

阅读量1.1k

点赞数

文章标签： javascript html 悬浮广告

本文链接：https://blog.csdn.net/HANLIPENGHANLIPENG/article/details/47302215

版权

js 专栏收录该内容

4 篇文章 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>