html GIPHY API /暂停GIF

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html GIPHY API /暂停GIF相关的知识,希望对你有一定的参考价值。

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

<head>
  <meta charset="utf-8">
  <title>Pausing Gifs</title>
</head>

<body>
  <img src="http://media1.giphy.com/media/3o85xkQpyMlnBkpB9C/200_s.gif" data-still="http://media1.giphy.com/media/3o85xkQpyMlnBkpB9C/200_s.gif" data-animate="http://media1.giphy.com/media/3o85xkQpyMlnBkpB9C/200.gif" data-state="still" class="gif">
  <img src="http://media2.giphy.com/media/8rFQp4kHXJ0gU/200_s.gif" data-still="http://media2.giphy.com/media/8rFQp4kHXJ0gU/200_s.gif" data-animate="http://media2.giphy.com/media/8rFQp4kHXJ0gU/200.gif" data-state="still" class="gif">
  <img src="http://media3.giphy.com/media/W6LbnBigDe4ZG/200_s.gif" data-still="http://media3.giphy.com/media/W6LbnBigDe4ZG/200_s.gif" data-animate="http://media3.giphy.com/media/W6LbnBigDe4ZG/200.gif" data-state="still" class="gif">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript">
    $(".gif").on("click", function() {
      // The attr jQuery method allows us to get or set the value of any attribute on our HTML element
      var state = $(this).attr("data-state");
      // If the clicked image's state is still, update its src attribute to what its data-animate value is.
      // Then, set the image's data-state to animate
      // Else set src to the data-still value
      if (state === "still") {
        $(this).attr("src", $(this).attr("data-animate"));
        $(this).attr("data-state", "animate");
      } else {
        $(this).attr("src", $(this).attr("data-still"));
        $(this).attr("data-state", "still");
      }
    });
  </script>
</body>

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

<head>
  <meta charset="utf-8">
  <title>Giphy API</title>
</head>

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript">
    // Example queryURL for Giphy API
    var queryURL = "http://api.giphy.com/v1/gifs/trending?api_key=dc6zaTOxFJmzC";

    $.ajax({
      url: queryURL,
      method: 'GET'
    }).done(function(response) {
      console.log(response);
    });
  </script>

</body>

</html>

以上是关于html GIPHY API /暂停GIF的主要内容,如果未能解决你的问题,请参考以下文章

我正在使用 Giphy API,我想知道如何自动获取 GIF 的图像 URL,而不是手动获取

Giphy 上传适用于 .ajax 但不能获取

无法使用 discord.js 获取带有 giphy 的 gif,制作机器人

无法使用 ffmpeg 将在线 gif 转换为 mp4 视频

如何在android webview中显示具有giphy iframe的网页?

有没有办法从 html 调整背景图像的大小