简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Javascirpt想实现渐变变长的运动效果！
大家讲道理
大家讲道理 2017-04-10 16:41:56
0
4
300
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代码段来实现的，但是目前还有些问题，没办法停止，请各位大神帮忙看看。

大家讲道理
大家讲道理

光阴似箭催人老，日月如移越少年。

répondre à tous(4)
伊谢尔伦
伊谢尔伦2017-04-10 16:43:56 4 plancher

目测题主是想实现渐变变长的运动效果！
这是我自己封装运动全过程，从最基础到最终效果，例子全在里面
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>
// 注意布局的配合
Comme +0
Ajouter une réponse
大家讲道理
大家讲道理2017-04-10 16:43:56 3 plancher

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

Edit by Kumfo,start

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

Edit by KUmfo,end

Comme +0
Ajouter une réponse
黄舟
黄舟2017-04-10 16:43:56 2 plancher 
var contentbody = document.getElementById("main");
   if(contentbody.style.marginLeft=="")
   {
       contentbody.style.marginLeft='width';
        for(var width=0;width<50;width++){
          //要实现的操作
        }
   }else{
       contentbody.style.marginLeft="";
   }
Comme +0
Ajouter une réponse
大家讲道理
大家讲道理2017-04-10 16:43:56 1 plancher

你需要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);
  })();
};
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！