Question

我是一名学生，我正在尝试启动，暂停并在用户点击gif时启动一个gif，但我仍然坚持如何添加此点击功能。我知道对象的gif版本是.images.fixed_height.url，静止图像是.images.fixed_height_still.url。如果我尝试在$（this）下方追加，我得到的图像是未定义的。这样做我怎么样？当您单击该类别时，当前显示10个GIF。感谢您提前提供任何帮助。

代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Giphy</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

  <style>
    body {
      background-image: url('http://www.efoza.com/postpic/2011/04/elegant-blue-wallpaper-designs_154158.jpg');
      width: 100%;
    }
    button {
      padding: 0 2%;
      margin: 0 2%;
    }
    h4 {
      font-size: 165%;
      font-weight: bold;
      color: white;
    }
    .container {
      background-color: rgba(0, 0, 0, 0.2);
      max-width: 1000px;
      width: 100%;
    }
    .btn {
      margin-top: 2%;
      margin-bottom: 2%;
      font-size: 125%;
      font-weight: bold;
    } 
    .guide {
      padding: 3% 0 0 0;
    }
    .tag-row {
      padding: 3% 0 0 0;
    }
    .category-row {
      padding: 3% 0 ;
    }
    #photo {
      padding-bottom: 3%;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="row text-center guide"><h4>Click a category and see the current top 10 most popular giphy's of that category!</h4></div>
    <div class="row text-center tag-row" id="tags"></div>
    <div class="row text-center category-row">
      <input type="" name="" id="category"><button class="btn btn-secondary" id="addTag">Add Category</button>
    </div>
  </div>

  <div class="container">
    <div id="photo"></div>
  </div>

  <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
  <script type="text/javascript">

    var tags = ["dog", "dolphin", "whale", "cat", "elephant", "otter"];

    // Function for displaying movie data
      function renderButtons() {

        $("#tags").empty();

        for (var i = 0; i < tags.length; i++) {
          $("#tags").append('<button class="tag-buttons btn btn-primary">' + tags[i] + '</button>');
        }      

      } 

    // Add tags function // 

    $(document).on('click', '#addTag', function(event) {

      event.preventDefault();

      var newTag = $("#category").val().trim();
      tags.push(newTag);

      $("#tags").append('<button class="tag-buttons btn btn-primary">' + newTag + '</button>');

    });

    // Tag button function //

    $(document).on('click', '.tag-buttons', function(event) {

      // Keeps page from reloading //
      event.preventDefault();

      var type = this.innerText;
      console.log(this.innerText);
      var queryURL = "http://api.giphy.com/v1/gifs/search?q=" + window.encodeURI(type) + "&limit=10&api_key=dc6zaTOxFJmzC";

      $.ajax({
        url: queryURL,
        method: "GET"
      }).done(function(response) {
        for (var i = 0; i < response.data.length; i++) {
      $("#photo").append('<img src="' + response.data[i].images.fixed_height_still.url + '" class="animate">');
      $('.animate').on('click', function() {
        $(this).remove().append('<img src="' + response.data[i].images.fixed_height.url + '" class="animate">');
        console.log($(this));
      }); 
    }   
      });

      $("#photo").empty();

    });
    renderButtons();
  </script>
</body>
</html>

Answer 1

fixed_height和fixed_height_still之间的区别将解决问题。如果仔细观察，网址的区别仅在于name_s.gif和name.gif。

所以你可以简单地交换这两个图像来创建一个玩家。这将像一个戏剧和停止。不玩和停顿。但是在一个小的GIF中，我认为暂停并不重要，停止和暂停看起来会很相似。

将类名添加到#photo

 $("#photo").append('<img class="gif" src="' + response.data[i].images.fixed_height_still.url + '">');

将控制播放和停止的事件处理程序

$('body').on('click', '.gif', function() {
    var src = $(this).attr("src");
  if($(this).hasClass('playing')){
     //stop
     $(this).attr('src', src.replace(/\.gif/i, "_s.gif"))
     $(this).removeClass('playing');
  } else {
    //play
    $(this).addClass('playing');
    $(this).attr('src', src.replace(/\_s.gif/i, ".gif"))
  }
});

jsfiddle演示 https://jsfiddle.net/karthick6891/L9t0t1r2/

Answer 2

你可以使用这个jquery插件http://rubentd.com/gifplayer/

<img class="gifplayer" src="media/banana.png" />

<script>
    $('.gifplayer').gifplayer();
</script>

你可以像这样控制

使用这些方法以编程方式播放和停止播放器

$('#banana').gifplayer('play');
$('#banana').gifplayer('stop');

您可以在https://github.com/rubentd/gifplayer

找到更多详细信息

如何使用jQuery AJAX暂停和启动gif

2 个答案: