Бегущий старт и стоп

Я хочу иметь рамку изображений, которые прокручиваются влево, и когда вы нажимаете на них, они останавливаются, а когда вы нажимаете на них снова, они продолжают двигаться влево. Я знаю код выделения, но как бы вы закодировали эту функцию на Java или jQuery?


javascript html jquery onclick marquee
person Josh Gret    schedule 23.03.2015    source источник
comment
Во-первых, не кладите Java и JavaScript в одну сумку, они действительно разные. Затем опубликуйте то, что у вас есть, иначе вы получите отрицательный отзыв, потому что ваш вопрос слишком общий, так как невозможно дать конкретный ответ.   -  person blex    schedule 23.03.2015
comment
вообще говоря, вам нужно создать обработчик (функцию) для обработки событий onclick для каждого из элементов. Обработчик должен либо остановить интервальный таймер, либо анимацию клавиш (если вы создали ее с помощью ключевых кадров css).   -  person Brett Caswell    schedule 23.03.2015
comment
вот небольшая скрипка, демонстрирующая, как приостановить анимацию клавиши css, манипулируя классом элементов (таким образом, используя класс элемента для представления состояния). jsfiddle.net/bcaswell/CGmCe/10875   -  person Brett Caswell    schedule 23.03.2015
comment
возьмите ту же скрипку, увеличьте длительность анимации и количество 'шагов': jsfiddle.net/bcaswell/CGmCe/10876   -  person Brett Caswell    schedule 23.03.2015

Ответы (1)


arrow_upward
0
arrow_downward

Ниже показано переключение состояния воспроизведения CSS-анимации для приостановки и воспроизведения бегущей строки/слайд-шоу/анимации.

Анимация использует объявление стиля background-position для изменения отображаемой позиции фонового изображения, которое выглядит следующим образом:

Несколько изображений в последовательности

// adapted from simurai's fiddle: http://jsfiddle.net/simurai/CGmCe/light/

var elm = document.querySelector("div.hi");
function pause() {
    console.log(elm);
    elm.className = "hi stop";
    elm.onclick = play;
}

function play()
{
    elm.className = "hi";
    elm.onclick = pause;    
}

elm.onclick = pause;
.hi {
    width: 50px;
    height: 72px;
    background-image: url("http://s.cdpn.io/79/sprite-steps.png");
    
    -webkit-animation: play 8s steps(1000) infinite;
       -moz-animation: play 8s steps(1000) infinite;
        -ms-animation: play 8s steps(1000) infinite;
         -o-animation: play 8s steps(1000) infinite;
            animation: play 8s steps(1000) infinite;
}

.hi.stop {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}


@-webkit-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-moz-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-ms-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-o-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}
<div class="hi"></div>

person Brett Caswell    schedule 23.03.2015
comment
Это, очевидно, работает, и это хорошо, что вы показываете, что это работает, вместо того, чтобы просто публиковать какой-то код предложения, который не был протестирован, как я видел, как это делалось с вопросами других людей, поэтому мне это нравится. К сожалению, для меня это подняло около 7 других вопросов, отвечая на этот. Так что мне еще многому предстоит научиться. Я никогда не слышал о console.log или .querySelector. Так что спасибо за то, что дал мне новые вещи для исследования. - person Josh Gret; 24.03.2015
comment
console.log предназначен для отображения информации в консоли инструментов веб-разработчика. В современных браузерах есть инструменты разработчика в браузере (хотя вам, возможно, придется включить настройку — как в случае с сафари), если вы нажмете F12 в своем браузере. откроет Инструменты разработчика.. консоль будет внизу.. сама консоль позволяет вам выполнять javascript в окне/документе.. поэтому, если у вас есть функция javascript, которая не обрабатывается или не привязана к событию, вы можете вызвать его явно.. - person Brett Caswell; 24.03.2015
comment
<element>.querySelector и <element>.querySelectorAll возвращают неактивные списки узлов, что означает, что размер коллекции/массива не изменяется в зависимости от запроса.. сам запрос представляет собой строку в формате селекторов CSS, поэтому document.querySelectorAll("a") возвращает все a тегов в документе в виде массива. document.querySelectorAll("a > img") возвращает все теги img, которые являются потомками тегов a в документе. - person Brett Caswell; 24.03.2015