JS+CSS 实现悬浮滚动广告

最新推荐文章于 2025-03-04 08:30:00 发布

原创最新推荐文章于 2025-03-04 08:30:00 发布 · 2.3k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端

当前文章被收录于：

前端

25 篇文章 2 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了一个简单的HTML页面，其中包含一个使用JavaScript实现自动移动的小广告。该广告在浏览器窗口内随机移动，碰到边界会反弹。文章提供了完整的代码实现。

效果图：

这里写图片描述

思路：

布局一个绝对布局的div 写一个move方法改变div的left 和top值
需要注意到达body边界时候改变方向
然后设置定时器调用move方法不断改变 left和top值

代码：


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>移动的小广告</title>
</head>
<body>
 <div id="xgg" style="position: absolute;left: 0px;top: 0;">
     <img src="images/123.jpg" alt="">
 </div>
 <script>
     var xleft=0;
     var ytop=0;
     var movex=1;
     var movey=1;
     function  move(){
         xleft+=movex;
         ytop+=movey;
         var xgg=document.getElementById("xgg");
         xgg.style.top=ytop;
         xgg.style.left=xleft;
         if(xleft+xgg.offsetWidth>=document.body.clientWidth|| xleft<=0){
             movex=-movex;
         }
//注意 document.body.clientHeight 兼容问题
             if(ytop+xgg.offsetHeight>=document.body.clientHeight||ytop<=0){
             movey=-movey;
         }

     }
     setInterval(move,10);
 </script>
</body>
</html>