js实现的点击gif封面后加载gif动态图

当前位置：电视猫 > JavaScript>

电视猫时间： 2024-08-29 09:33:14

JavaScript实现点击GIF封面加载动态图

理解需求

当用户点击一个静态的GIF封面图片时，希望能够动态加载并显示完整的GIF动画。这在很多场景下都有应用，比如社交媒体的点赞动画、网页加载时的GIF占位图等。

实现方案

HTML结构:

HTML

<div class="gif-container">
  <img src="static_gif.gif" alt="GIF封面" class="gif-cover">
  <img src="dynamic_gif.gif" alt="GIF动态图" class="dynamic-gif" style="display: none;">
</div>

gif-cover: 静态的GIF封面图片，用户点击的触发点。
dynamic-gif: 完整的GIF动态图，初始状态下隐藏。

JavaScript代码:

JavaScript

const gifCover = document.querySelector('.gif-cover');
const dynamicGif = document.querySelector('.dynamic-gif');

gifCover.addEventListener('click', () => {
  gifCover.style.display = 'none';
  dynamicGif.style.display = 'block';
});

代码解释:

获取元素: 通过 querySelector 获取到静态封面和动态GIF的元素。
添加点击事件: 给静态封面添加点击事件监听器。
隐藏封面，显示动态图: 当用户点击封面时，将封面的 display 属性设置为 none，同时将动态GIF的 display 属性设置为 block。

完整示例

HTML

<!DOCTYPE html>
<html>
<head>
  <title>点击加载GIF</title>
</head>
<body>
  <div class="gif-container">
    <img src="static_gif.gif" alt="GIF封面" class="gif-cover">
    <img src="dynamic_gif.gif" alt="GIF动态图" class="dynamic-gif" style="display: none;">
  </div>
  <script>
    // ... 上述JavaScript代码
  </script>
</body>
</html>