javascript 移动特效的实现代码

 更新时间:2016年06月25日 09:00:46   投稿:jingxian   我要评论
下面小编就为大家带来一篇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 移动特效的实现代码全部内容了,希望大家多多支持澳门金沙网上娱乐~

相关文章

最新评论