JS+CSS 实现 悬浮滚动广告

    • 效果图
    • 思路
    • 代码

效果图:

JS+CSS 实现 悬浮滚动广告_第1张图片

思路:

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

你可能感兴趣的:(前端)