Скрипт “ходячего человека” не работает, в чем просчет?

#javascript #jquery

function(){

var curr;
var swapped = 0;
var $W = $(window);
var $man = $('.footer-walk-man');
var mw = $man.width();
var max = $W.width() - mw;
var time = $W.width()/(mw*1.2);
var walk = {
    init: function (){
        walk.right();
        walk.counters();
        $W.on('resize', function (){
            max = walk.getMax();
            time = $W.width()/mw;
        });
    },
    getMax: function (){
        return $W.width() - mw;
    },
    swap: function(){
        swapped = swapped ? false : true;
        curr = curr == '180deg' ? '0deg' : '180deg';
        TweenMax.set($man, {transform: 'rotateY('+ curr +')'});
    },
    left: function (){
        curr = swapped ? '0deg' : '180deg';
        TweenMax.set($man, {transform: 'rotateY('+ curr +')'});
        TweenMax.to(
            $man,
            time,
            {
                left: 0,
                ease: Power0.easeNone,
                onComplete: function(){
                    TweenLite.killTweensOf($man);
                    walk.right();
                }
            }
        );
    },
    right: function (){
        curr = swapped ? '180deg' : '0deg';
        TweenMax.set($man, {transform: 'rotateY('+ curr +')'});
        TweenMax.to(
            $man,
            time,
            {
                left: max,
                ease: Power0.easeNone,
                onComplete: function(){
                    TweenLite.killTweensOf($man);
                    walk.left();
                }
            }
        );
    },
    counters: function (){
        var $metr, $cal,
            _timer;
        $metr = $('.footer-walk-metr');
        $cal = $('.footer-walk-cal');

        clearInterval(_timer);
        _timer = setInterval(function (){
            $metr.text(parseInt($metr.text())+1);
            $cal.text(Number(parseFloat($cal.text())+0.087).toFixed(2));
        }, 1000);
    }
};
walk.init();



    






    

        

        

            

                
Пока вы находитесь на сайте,
                
человечек уже прошел  м
                
и, между прочим, потратил  ккал
            
        
    







Вот нашел код по Ходящему человеку который сжигает калорий. Только вот он не передает
ничего в классы див не движется блок с картинкой и не цифры не изменяются


    

Ответы

Ответ 1

Чтобы человечек двигался, Вы задаете left от 0 до max, поэтому самому человечку нужно
задать css св-во position:relative или position:absolute (на статику left \ right не
действует).

Изначально в $metr и $cal пустота. Стоит задать какое-то стартовое значение (например
просто 0):



var curr;
var swapped = 0;
var $W = $(window);
var $man = $('.footer-walk-man');
var mw = $man.width();
var max = $W.width() - mw;
var time = $W.width()/(mw*1.2);

var walk = {
    init: function (){
        walk.right();
        walk.counters();
        $W.on('resize', function (){
            max = walk.getMax();
            time = $W.width()/mw;
        });
    },
    getMax: function (){
        return $W.width() - mw;
    },
    swap: function(){
        swapped = swapped ? false : true;
        curr = curr == '180deg' ? '0deg' : '180deg';
        TweenMax.set($man, {transform: 'rotateY('+ curr +')'});
    },
    left: function (){
        curr = swapped ? '0deg' : '180deg';
        TweenMax.set($man, {transform: 'rotateY('+ curr +')'});
        TweenMax.to(
            $man,
            time,
            {
                left: 0,
                ease: Power0.easeNone,
                onComplete: function(){
                    TweenLite.killTweensOf($man);
                    walk.right();
                }
            }
        );
    },
    right: function (){
        curr = swapped ? '180deg' : '0deg';
        TweenMax.set($man, {transform: 'rotateY('+ curr +')'});
        TweenMax.to(
            $man,
            time,
            {
                left: max,
                ease: Power0.easeNone,
                onComplete: function(){
                    TweenLite.killTweensOf($man);
                    walk.left();
                }
            }
        );
    },
    counters: function (){
        var $metr, $cal,
            _timer;
      
        $metr = $('.footer-walk-metr');
        $cal = $('.footer-walk-cal');
      
      //console.log($metr.text());

        clearInterval(_timer);
        _timer = setInterval(function (){
            $metr.text(parseInt($metr.text())+1);
            $cal.text(Number(parseFloat($cal.text())+0.087).toFixed(2));
        }, 1000);
    }
};
  
walk.init();
.footer-walk-man {
  width:150px; 
  position:relative;
}

.footer-walk-man img {
  max-width: 100%;
}


  

    

        

          
      
        

            

                
Пока вы находитесь на сайте,
                
человечек уже прошел 0 м
                
и, между прочим, потратил 0 ккал