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

最新推荐文章于 2023-11-08 13:37:53 发布

原创最新推荐文章于 2023-11-08 13:37:53 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #悬浮广告

js 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的元素自动移动与尺寸变化的方法。该方法通过不断改变元素的位置和大小来达到视觉上的动态效果。文章提供了一个具体的示例，展示了如何在网页中创建一个可以自动移动并调整其高度和宽度的粉色方块。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<!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>