Как установить эффект Onclick только для работы в определенное время?

У меня есть gif на моей странице, который воспроизводится только один раз и останавливается в последнем кадре. Причина этого в том, что я хочу, чтобы gif играл только, когда я нажимаю на нее, а затем останавливаюсь в последнем кадре, пока не будет снова нажата. Я добавил эффект onclick, который делает перезапуск gif из первого кадра, и я сделал этот эффект, используя следующие JSFiddle link.Как установить эффект Onclick только для работы в определенное время?

Эффект работает так, как предполагается, но я заметил, что если вы дважды щелкнете или щелкните до того, как gif будет завершен, он перезапустит gif в середине игры. Есть ли способ заставить эффект onclick (перезагрузка gif) работать только через определенное время (предпочтительно заданное количество времени после начала gif), так что эффект onclick работает только тогда, когда gif достиг последнего Рамка?

У меня есть идея добавления слоя-изображения (последнего кадра), перекрывающего gif, а затем я даю этому изображению эффект onclick, а также эффект, чтобы скрыть/исчезнуть при щелчке, а затем перезаписать после определенного количества времени (время, которое требуется для воспроизведения gif один раз), но я не знаю, как это сделать. Может кто-нибудь, пожалуйста, помогите мне? не стесняйтесь использовать ссылку JSFiddle, приведенную выше.

Кроме того, будучи нобом, я не знаю, как поместить коды из моей ссылки JSFiddle в блокнот, может кто-то помочь?

До сих пор я получил это ...

<html> 
<head> 
<title>Around The World</title> 

<script> 
$(function(){ 
    var image = new Image(); 
    image.src ='Hopping No Repeat.gif'; 
    $('#img').click(function(){ 
     $(this).attr('src',image.src); 
    }); 
}); 
</script> 


<style> 
img{ 
    width:150px; 
    height:206px; 
} 
</style> 

</head> 
<body bgcolor="lightblue"> 

<img id = "img" 

src = "Hopping No Repeat.gif"> 

</body> 
</html>

Когда я поставил его так, эффект OnClick не работает .. жаль incompitance, я уверен, что это что-то вроде очевидно, тег скольжения или что-то еще, но я бы посоветовал некоторую помощь.

Спасибо всем!

источник

2014-10-23 deckard

Вы также можете попытаться удалить обработчик событий и добавить его снова, когда ваша анимация будет выполнена ... но самым простым способом, возможно, было бы просто установить флаг, указывающий, что анимация в данный момент запущена, и если для этого флага установлено значение true , обработчик клика просто выходит/ничего не делает ... и когда анимация завершена, вы сбросите флаг на false. – CBroe

Это замечательно! Просто то, что мне нужно, спасибо! хотя как бы я написал эти коды?Я новичок в написании сценариев (только 1 неделя или около того), поэтому я действительно не подвергался этому типу сценариев. Спасибо за вашу помощь и интерес – deckard

Учитывая, что вы выполняете «анимацию», основанную на re/load gif, нет быстрого доступа к событию «окончание» изображения.

В быстрой выборке используется флаг для указания действия при использовании таймаута после разумного количества времени, чтобы указать, что действие должно быть выполнено. См: http://jsfiddle.net/GS427/55/

$(function(){ 
    var image = new Image(); 
    image.in_action = false; // flag to determine current state. Initialize to ready to animate. 
    image.duration = 750; // This is rough, if you are creating the gif you can peg this to the proper duration 
    image.src ='http://inftek1.dyndns.org/daniel/test123/Hopping No Repeat.gif'; 
    $('#img').click(function(){ 
    if (!image.in_action) { 
     image.in_action = true; // Set the image as in progress 
     $(this).attr('src',image.src); 
     window.setTimeout(function() { 
     image.in_action = false; // After image.duration miliseconds, set as finished 
     }, image.duration); 
    } 
    }); 
});

Если бы я делал это с такой же точностью, как это возможно, я бы модифицировать этот пример срабатывают только после того, как первоначальный GIF загружается и кэшируются (так как мы не знаем, как долго загрузки изображения будет взять), но это начинает ползти на более сложную территорию.

источник

2014-10-23 08:39:45 DivinusVox

Это работает отлично! Но по какой-то причине, когда я помещаю его в свой скрипт, он не работает. – deckard

вы могли бы помочь мне разместить это в моем html-коде? – deckard

Вы должны просто заменить часть javascript вашего файла частью javascript скрипки. – DivinusVox

Это довольно грубая, и, следовательно, простая и прямая.

Всякий раз, когда вы нажимаете на gif, он выполняет тест, чтобы проверить, не изменилось ли значение «игра» переменной «true», а затем задает значение play = true, и по истечении заданного времени (600 мс в этом случае) устанавливает атрибут, играющий = ложный.

$(function(){ 
    var image = new Image(); 
    image.src ='http://inftek1.dyndns.org/daniel/test123/Hopping No Repeat.gif'; 

    var playing = false; 

     $('#img').click(function(){ 

      if (playing != true) { 

       $(this).attr('src',image.src); 

       playing = true; 

       setTimeout(function() { 
        playing = false; 
       }, 600); 
      } 
     }); 
});

По крайней мере, это путь, который кажется наиболее логичным для меня, так как нет никакого естественного способа обнаружения, если GIF играет. Единственный недостаток здесь - вы должны ввести продолжительность анимации вручную.

источник

2014-10-23 09:14:07

Как установить эффект Onclick только для работы в определенное время?

ответ

Смежные вопросы