如何控制网页中的gif？

我嵌入GIF这样的：如何控制网页中的gif？

<img src="myimage.gif">

加载页面时，该播放。我希望能够为图像启动和停止或暂停功能。 gif应该开始和停止点击。

我该如何做到这一点？非常感谢。

来源

2017-04-01 Somename

http://www.pcworld.com/article/2842792 /how-to-create-a-high-quality-animated-gif.html你检查这个链接 –

[你可以用Javascript控制GIF动画吗？]（http://stackoverflow.com/questions/2385203/can -you-control-gif-animation-with-javascript） – jakeehoffmann

$('.gifs a').embedly({ 
     display: function(obj){ 
     if (obj.type === 'photo'){ 

      var $this = $(this); 

      // Create the static image src with Embedly Display. 
      var src = $.embedly.display.display(obj.url, {query: {animate:false} }); 

      // Add static gif placeholder to the parent 
      $this.html('<img class="gif-holder" src="'+src+'" />'); 

      // Start preloading the actually gif. 
      $this.append('<img class="gif-preload" src="'+obj.url+'" />'); 

      // Create a promise so we can keep track of state. 
      $this.data('promise', $.Deferred()); 

      // Get the element we added. 
      var elem = $this.find('.gif-preload').get(0); 

      // If the image is not in cache then onload will fire when it is. 
      elem.onload = function(){ 
      $this.data('promise').resolve(); 
      }; 

      // If the image is already in the browsers cache call the handler. 
      if (elem.complete) { 
      $this.data('promise').resolve(); 
      } 
      // Set the static gif url so we can use it later. 
      $(this).data('static_url', src); 
     } else { 
      // remove li if it's not an image. 
      $(this).parent().remove(); 
     } 
     } 
    }).on('mouseenter', function(){ 
     var $this = $(this); 

     // Set the hover state to true so that the load function knows to run. 
     $this.data('hover', true); 

     // Create a function to load the gif into the image. 
     var load = function(){ 
     if ($this.data('hover') === true){ 
      // Remove the loading image if there is one 
      $this.find('.gif-loading').remove(); 

      // Swap out the static src for the actually gif. 
      $this.find('img.gif-holder').attr('src', $this.data('embedly').url); 
     } 
     }; 
     // Add the load function to the done callback. If it's already resolved 
     // this will fire immediately. 
     $this.data('promise').done(load); 

     // Add a spinner if it's not going to play right away. 
     if ($this.data('promise').state() === 'pending'){ 
     // Add a loading spinner. 
     $this.append('<i class="gif-loading fa fa-spinner fa fa-spin"></i>'); 

     // we need to center it over the image. 
     $this.find('.gif-loading').css({ 
      top: $this.height()/2 - 20, 
      left: $this.width()/2 - 20 
     }); 
     } 
    }).on('mouseleave', function(){ 
     var $this = $(this); 

     // Make sure the load function knows we are no longer in a hover state. 
     $this.data('hover', false); 

     // Remove the spiner if it's there. 
     $this.find('.gif-loading').remove(); 

     // Set the src to the static url. 
     $this.find('img.gif-holder').attr('src', $(this).data('static_url')); 
    });

给予最好的动画您可以使用Java脚本文件，这些代码

来源

2017-04-01 06:58:29

你的代码对我的代码太好了，谢谢 –

<script type="text/javascript" src="./libgif.js"></script> 
<img src="./example1_preview.gif" rel:animated_src="./example1.gif" 
width="360" height="360" rel:auto_play="1" rel:rubbable="1" /> 

<script type="text/javascript"> 
    $$('img').each(function (img_tag) { 
     if (/.*\.gif/.test(img_tag.src)) { 
      var rub = new SuperGif({ gif: img_tag }); 
      rub.load(function(){ 
       console.log('oh hey, now the gif is loaded'); 
      }); 
     } 
    }); 
</script>

您使用Java脚本代码来控制的Gif

来源

2017-04-01 06:54:51

如何控制网页中的gif？

回答

相关问题