DDR爱好者之家

javascript 广告移动特效的实现代码
站长资源 2024/11/29 佚名
69 1538
DDR爱好者之家 Design By 杰米
<!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 广告移动特效的实现代码全部内容了，希望大家多多支持~

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米