javascript 广告移动特效的实现代码

前端技术 2023/09/06 JavaScript 
<!DOCTYPE html>
<html lang=\"en\">
<head>
  <meta charset=\"UTF-8\">
  <title>Document</title>
  <style>
    .box2{}
    .box2{width: 200px; height: 200px; background: red; border-radius: 50%;position: relative;}
    .box3{width: 800px; height: 500px; border:1px solid red;}
  </style>
</head>
<body>
<button type=\"\" id=\"start\">开始</button>
<button type=\"\" id=\"stop\">停止</button>
<div class=\"box3\">
  

  <div id=\"box\" class=\"box2\">
    
  </div>
  </div>
</body>
<script type=\"text/javascript\">
  var lr=600;
  var tb=300;
  var i=0;
  var j=0;

  var box=document.getElementById(\'box\');
  var start=document.getElementById(\'start\');
  var stop=document.getElementById(\'stop\');

  start.onclick=function(){
    start.style.display=\'none\';
    stop.style.display=\'inline\';
    var time=setInterval(function(){
      box.style.left=i+\'px\';
      box.style.top=j+\'px\';
      if (i>lr) {
        lr=0;
        i--;
      }
      if(i<=lr){
        lr=600;
        i++;
      }
      if (j>tb) {
        tb=0;
        j--;
      }
      if (j<=tb) {
        tb=300;
        j++
      }
      stop.onclick=function(){
        clearInterval(time);
        stop.style.display=\'none\';
        start.style.display=\'inline\';
      }
    },5);

  }
</script>
</html>

以上就是小编为大家带来的javascript 广告移动特效的实现代码全部内容了，希望大家多多支持phpstudy~

本文地址：https://www.stayed.cn/item/15594

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案