javascript - Javascirpt想实现渐变变长的运动效果！

Question

{代码...} demo:http://www.wusichao.com/demo/admin_template/ 修改了JS代码，借着「看不懂未来」大神写的运动JS代码段来实现的，但是目前还有些问题，没办法停止，请各位大神帮忙看看。

伊谢尔伦 · Answer

目测题主是想实现渐变变长的运动效果！
这是我自己封装运动全过程，从最基础到最终效果，例子全在里面
https://github.com/yangbo5207/front-end-road/tree/master/018.%20javascript%E6%A8%A1%E5%BC%8F/move

楼主想要的例子如下：




    
    Document
    
    


    
    
        

    



// 注意布局的配合

大家讲道理 · Answer

题意有些不明，说说你想实现什么吧？用这个for来实现？

Edit by Kumfo,start

我也想知道题主想问一个什么问题，没搞清楚要实现什么，搞不清楚要实现什么就不知道怎么搞啊！！！

Edit by KUmfo,end

黄舟 · Answer

var contentbody = document.getElementById("main");
   if(contentbody.style.marginLeft=="")
   {
       contentbody.style.marginLeft='width';
        for(var width=0;width<50;width++){
          //要实现的操作
        }
   }else{
       contentbody.style.marginLeft="";
   }

大家讲道理 · Answer

你需要setTimeout： Demo

// 页面 domready 后执行
document.addEventListener('DOMContentLoaded', function(){
  var main = document.getElementById('main');
  loop(main);
});
var loop = function(obj, start, max, duration){
  if(!obj) return false;
  start = start || 0;
  max = max || 200;
  duration = duration || 17;
  (function run(){
    // 可以加任何条件判断，以跳出循环动画
    if(max <= 0) return false;
    if(start > max) start = 0;
    // 下面是每隔一段时间执行动画的业务逻辑部分，可以修改
    obj.style.marginLeft = start + 'px';
    obj.style.marginTop = start + 'px';
    obj.style.transform = 'rotate('+start*5+'deg) scale('+start/max+')';
    // 该帧动画执行完毕后，width + 1，然后进行下一帧动画
    start++;
    setTimeout(run, duration);
  })();
};

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

Edit by Kumfo,start

Edit by KUmfo,end