Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.01.2015, 14:41
Интересующийся
Отправить личное сообщение для staseward Посмотреть профиль Найти все сообщения от staseward
 
Регистрация: 17.07.2014
Сообщений: 14

Двигающаяся .gif помогите
Нужно заставить двигаться .gif изображение с левого края экрана к правому по кнопке start и stop, что бы остановить. Также двигаться быстрее по кнопке быстрее. И в обратном порядке с правой стороны экрана к левой. Не стоит обращать внимание на гифку... она двигается сама по себе, как будто это просто картинка, объект. двигать нужно его.. Помогите пожалуйста
Изображения:
Тип файла: gif CAT-WALK.GIF (5.4 Кб, 8 просмотров)

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

staseward, со скоростью не логично будет, так как скорость гифки одна и та же.
Ответить с цитированием
  #3 (permalink)  
Старый 22.01.2015, 16:32
Интересующийся
Отправить личное сообщение для staseward Посмотреть профиль Найти все сообщения от staseward
 
Регистрация: 17.07.2014
Сообщений: 14

не стоит обращать внимание на гифку... она двигается сама по себе, на это не обращаем внимание, как будто это просто картинка, объект. двигать нужно его..
Ответить с цитированием
  #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>
Ответить с цитированием
  #5 (permalink)  
Старый 22.01.2015, 20:19
Интересующийся
Отправить личное сообщение для staseward Посмотреть профиль Найти все сообщения от staseward
 
Регистрация: 17.07.2014
Сообщений: 14

спасибо, все работает, ток есть 2 проблемы, сама гифка теперь не двигаеться и когда запускаю через браузер chrome, гиффка ниже экрана находиться(ее не видно)... как это исправить?
Ответить с цитированием
  #6 (permalink)  
Старый 22.01.2015, 23:50
Интересующийся
Отправить личное сообщение для staseward Посмотреть профиль Найти все сообщения от staseward
 
Регистрация: 17.07.2014
Сообщений: 14

спасибо, все работает, ток есть 2 проблемы, сама гифка теперь не двигаеться и когда запускаю через браузер chrome, гиффка ниже экрана находиться(ее не видно)... как это исправить?
Ответить с цитированием
  #7 (permalink)  
Старый 23.01.2015, 06:42
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

staseward, ширину и высоту в стилях поменял?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Люди, помогите дилетанту! Как объеденить скрипты в один файл? patroklit Элементы интерфейса 3 04.12.2013 13:55
Помогите с fancyBox Le-mark43 Events/DOM/Window 6 20.12.2012 08:08
ПОМОГИТЕ!!! JavaScript aktau07 Общие вопросы Javascript 9 03.10.2011 23:10
Помогите! Многоуровневые вкладки! sergeeeeee Элементы интерфейса 2 02.08.2010 23:50
Люди, ПОМОГИТЕ! Bel666 jQuery 11 27.04.2010 15:38