移动广告div

游鹄君2025年8月24日小于 1 分钟
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>移动div</title>
  <style type="text/css">
  *{padding:0px;margin:0px;}
  #move{width:240px;height:240px;background:orange;border-radius:50%;position:absolute;cursor:pointer;}
  </style>
</head>
<body>
  <div id='move'></div>
 
  <script type="text/javascript">
  //获取元素
  var move  = document.getElementById('move');
  //设置步长
  var stepl = 5;
  var stept = 5;
 
  var into = null;
 
  function running(){
    //定时器
    into = setInterval(function(){
     //获取元素的左偏移量和顶部的偏移量
     var l = move.offsetLeft;
     var t = move.offsetTop;
 
     //设置新的步长
     var nl = l+stepl;
     var nt = t+stept;
 
     //获取可视区域的宽和高
     var cw = document.documentElement.clientWidth;
     var ch = document.documentElement.clientHeight;
 
     //获取元素本身的宽和高
     var w = move.offsetWidth;
     var h = move.offsetHeight;
 
     if(nl >= (cw-w) || nl <= 0) {
 
       stepl *= -1;
     }
     if(nt >= (ch-h) || nt <= 0) {
 
       stept *= -1;
     }
 
     move.style.left = nl+'px';
     move.style.top = nt+'px';
 
    },30)
  }
 
  running();
 
  //鼠标放上去的事件
  move.onmouseover = function()
  {
    //清除定时器
    clearInterval(into);
  }
 
  //鼠标离开
  move.onmouseout = function()
  {
    running();
  }
 
  </script>
</body>
</html>