当前位置:主页 > JavsScript库 > 图库 / 图片 >

将多个图像组合成一个Gif动态图片-GiffyImages
栏目分类:图库 / 图片   发布日期:2021-08-16   浏览次数:

GiffyImages 是一个 JavaScript 库,可以像动画 GIF 一样将多张图片组合成一个可播放的图像。

如何使用它:

1. 下载并导入 GiffyImages 库。

<script src="./dist/giffy-images.min.js"></script>

2. 将图像插入 GiffyImages 容器。除了第一个之外,不要忘记在页面加载时隐藏图像。

<div id="giffy-images-container">
  <img width="150" src="1.jpg" alt="图片 1">
  <img style="display: none;" width="150" src="2.jpg" alt="图片 2">
  <img style="display: none;" width="150" src="3.jpg" alt="图片 3">
  <img style="display: none;" width="150" src="4.jpg" alt="图片 4">
  <img style="display: none;" width="150" src="5.jpg" alt="图片 5">
</div>

3. 初始化顶部容器上的 GiffyImages。

const giffyImages = new GiffyImages({
      imageHolderId: 'giffy-images-container'
})

4. 播放和暂停“GIF”。

giffyImages.playStop()

5. 或在所有图像加载后自动播放 Gif。

const giffyImages = new GiffyImages({
      imageHolderId: 'giffy-images-container',
      autoplay: true,
})

6.自定义动画速度。默认值:50。

const giffyImages = new GiffyImages({
      imageHolderId: 'giffy-images-container',
      speed: 200,
})



官方网站:https://github.com/leoncarey/giffy-images

相关热词: Gif动态图片GiffyImages

相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库