Показать сообщение отдельно
  #4 (permalink)  
Старый 22.01.2015, 18:10
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

http://learn.javascript.ru/play/Gz53qc

<!DOCTYPE HTML>
<html>
    <head>
      <style type="text/css">
        .cat {
            background: url('http://javascript.ru/forum/attachments/misc/2547d1421926832t-dvigayushhayasya-gif-pomogite-cat-walk-gif');
            bottom: 0;
            left: 0;
            height: 100px;
            position: fixed;
            width: 100px;
        }
      </style>
    </head>
  <body>
    
    <div class="cat"></div>
    <div>Speed: <input id="cat-speed" type="text" value="1"></div>
    <input onclick="startCat()" type="button" value="start">
    <input onclick="stopCat()" type="button" value="stop">

    <script>
      var cat = document.querySelector('.cat'),
          catSpeedElem = document.getElementById('cat-speed'),
          catIsAnimated, catIntervalID,
          catWidth = cat.clientWidth,
          displayWidth = window.innerWidth;
      
      function startCat() {
        if(catIntervalID) stopCat();
        var speed = (+catSpeedElem.value || 1) / 10,
          	selfStyle = cat.style,
            x = 0;
        catIntervalID = setInterval(function() {
          	x += speed;
          	selfStyle.left = x + 'px';
          	if(x >= displayWidth - catWidth) stopCat();
        }, 5);
        
      };
      
      function stopCat() {
        clearInterval(catIntervalID);
        catIntervalID = null;
      };




    </script>

  </body>
</html>
Ответить с цитированием