suchen

Heim  >  Fragen und Antworten  >  Hauptteil

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

var contentbody = document.getElementById("main"),
    timer = null,
    i = 0;
    
   if(contentbody.style.marginLeft=="")
   {
       timer = setInterval(function() {
           i++;
           contentbody.style.marginLeft=i + 'px';            
       }, 50);   
       if(parseInt(contentbody.style.marginLeft) > 50) {
           clearInterval(timer);
       }
   }else{
       contentbody.style.marginLeft="";
   } 

// 未自己运行，不保证代码完全正确，但是思路是这样的

demo:http://www.wusichao.com/demo/admin_template/

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

大家讲道理大家讲道理2774 Tage vor306

Antworte allen(4)Ich werde antworten

  • 伊谢尔伦

    伊谢尔伦2017-04-10 16:43:56

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

    楼主想要的例子如下：

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
        }
        body {
            overflow: hidden;
        }
        .left {
            width: 200px;
            height: 100%;
            background-color: orange;
            float: left;
        }
        .content {
            overflow: hidden;
            height: 100%;
            background-color: #ccc;
            position: relative;
            border: 1px solid red;
        }
        .btn {
            position: absolute;
            width: 40px;
            height: 40px;
            left: 10px;
            top: 10px;
            background-color: green;
        }

    </style>
</head>
<body>
    <p class="left"></p>
    <p class="content">
        <p class="btn"></p>
    </p>
</body>
<script>

$(function() {
    var tag = false;
    $('.btn').click(function() {
        if (!tag) {
            $('.left').animate({ width: 50 });    
        } else if (tag) {
            $('.left').animate({ width: 200 });
        };

        tag = !tag;
    })
})

</script>
</html>
// 注意布局的配合

    Antwort
    0
  • 大家讲道理

    大家讲道理2017-04-10 16:43:56

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

    Edit by Kumfo,start

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

    Edit by KUmfo,end

    Antwort
    0
  • 黄舟

    黄舟2017-04-10 16:43:56

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

    Antwort
    0
  • 大家讲道理

    大家讲道理2017-04-10 16:43:56

    你需要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);
  })();
};

    Antwort
    0
  • StornierenAntwort