Событие Mousehold в JQuery
В принципе, у меня есть это изображение с помощью кнопки со стрелкой влево и вправо. Это изображение, по умолчанию, является первым кадром, который я извлек из некоторого gif, исходный gif содержит 31 кадр. Моя цель – когда пользователи нажимают кнопку со стрелкой вправо, я хочу отобразить следующий кадр и т. Д. Все работает отлично, как показано ниже. Тем не менее, мне нужно добавить какое-то событие мыши, чтобы, когда пользователь нажимает и удерживает мышь, я хочу продолжать стрелять по следующим изображениям. Как я могу это достичь?
$('#arrow_right').click(function (event) { event.preventDefault(); var data_id = parseInt($(this).parent().find('#inner_wrap img').attr('data-id')); if (data_id >= 1 && data_id <= 30) { data_id = data_id + 1; var avatar_num = $('#inner_wrap').html('<img id="avatar" data-id="' + data_id + '" src="img/avatar_test' + data_id + '.gif" width="90" height="200">'); } }); - JQuery. Сам
- Раскол не работает
- Укажите вывод значения типа ввода HTML5 = дата?
- Как обнаружить левый клик в любом месте документа с помощью jQuery?
- ReactJS SyntheticEvent stopPropagation () работает только с событиями React?
- Тип входа FILE multiple - добавлять файлы последовательно
- JQuery Ajax вызывает базовую аутентификацию HTTP
- Как получить размер шрифта элемента, как он был установлен css
- JavaScript - чрезвычайно запутанный при удалении элементов из контейнера
- Как фильтровать массив / объект, проверяя несколько значений
- Проверьте, не анимирован ли элемент CSS3
- Получите $ this в angularjs
- Событие изменения jQuery в <select> не работает в IE
Хорошо, вы можете использовать событие mousedown для запуска функции, которая отображает gif-frame: http://api.jquery.com/mousedown/, а затем добавляет еще один обработчик событий для события mouseup , который остановит эту функцию. Эта функция может вызываться через setInterval() в mousedown -event, например, и останавливаться с помощью clearInterval() в событии mouseup .
Это пример, который показывает принцип:
var interval; $(button).addEventListener('mousedown',function(e) { interval = setInterval(function() { // here goes your code that displays your image/replaces the one that is already there },500); // 500ms between each frame }); $(button).addEventListener('mouseup',function(e) { clearInterval(interval); }); // Thank you, Timo002, for your contribution! // This code will stop the interval if you move your mouse away from the button while still holding it. $(button).addEventListener('mouseout',function(e) { clearInterval(interval); });
Помимо ответа Zim84, я должен добавить этот кусок кода!
$(button).addEventListener('mouseout',function(e) { clearInterval(interval); });
Это будет зависеть от того, что если кто-то нажал кнопку ( mousedown ) и удерживает курсор мыши и уходит ( mouseout ) кнопку, интервал также очищается. Без этого интервал не останавливается в этой конкретной ситуации.