JS+CSS 实现悬浮滚动广告

来源：互联网发布：股权众筹系统源码编辑：程序博客网时间：2024/06/10 03:56

- 效果图
- 思路
- 代码

效果图：

这里写图片描述

思路：

布局一个绝对布局的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>

0 0

JS+CSS 实现 悬浮滚动广告

效果图：

思路：

代码：

JS+CSS 实现悬浮滚动广告