freezeframe.js是控制gif及webp动画的插件-BFW插件库

freezeframe.js是控制gif及webp动画的插件

它允许你在网站/移动应用程序中轻松添加和控制GIF。

它具有许多功能,如:

- 播放/暂停

- 快进/快退

- 切换下一帧/上一帧

- 长按预览

- 触摸手势(双击快进,双击滑动关闭等)

- 自定义皮肤

- 全屏支持

该插件基于HTML5 Canvas技术构建,并具有触摸事件。它可以在所有现代浏览器和移动设备上工作。

基本用法:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/freezeframe.min.js"></script>


</head>

<body>

<img
  class="freezeframe"
  src="//repo.bfw.wiki/bfwrepo/icon/61f0871e2c420.gif"
/>

<script>
new Freezeframe();
</script>



</body>
</html>

选项:

$("#freezeframe").freezeframe({
skin: 'default', // default, dark, light
autoplay: true, //自动播放gif
controls: true, //显示控制按钮
nav: true, //显示帧导航器
title: true, //显示gif标题
loop: true, //循环播放
duration: 200, //每帧之间的持续时间
maxwidth: 600, //最大宽度
maxheight: 400 //最大高度
});

方法:

// 播放
$('#freezeframe').freezeframe('play');
// 暂停
$('#freezeframe').freezeframe('pause');
// 下一帧
$('#freezeframe').freezeframe('next');
// 上一帧
$('#freezeframe').freezeframe('prev');
//跳到第5帧
$('#freezeframe').freezeframe('jumpTo', 5);

完整代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/freezeframe.min.js"></script>

<style type="text/css">

body {
  max-width: 1000px;
  margin: 0px auto;
  padding: 20px;
  font-size: 13px;
  text-align: center;
  color: #202020;
}

a {
  color: #202020;
}

p {
  padding: 10px 0px;
  text-align: center;
  font-family: monospace;
}

button {
  width: 100px;
  margin: 0px 10px 10px 0px;
  padding: 5px 0px;
  border: 1px solid #000;
  background: #fff;
  outline: none;
  font-family: monospace;
  text-align: center;
}

button:active {
  background: #000;
  color: #fff;
}

.bold {
  font-weight: 700;
}

.italic {
  font-style: italic;
}
.grid {
  display: flex;
  flex-wrap: wrap;
  justify-items: center;
  align-items: center;
}

.grid .cell {
  width: calc(50% - 24px);
  height: auto;
  padding: 12px;
}

</style>
</head>

<body>

<p class="bold title">freezeframe.js</p>

<!-- Example 1 -->

<p>basic,<br />animate on hover.</p>

<img
  class="freezeframe"
  src="//repo.bfw.wiki/bfwrepo/icon/61f0871e2c420.gif"
/>

<script>
new Freezeframe();
</script>

<!-- Example 2 -->

<p>start & stop on click</p>

<img
  class="my-class-2"
  src="//repo.bfw.wiki/bfwrepo/icon/61f0871e2c420.gif"
/>

<script>
new Freezeframe({
  selector: '.my-class-2',
  trigger: 'click'
});
</script>

<!-- Example 3 -->

<p>start & stop manually.</p>

<button class="start">start</button>
<button class="stop">stop</button>

<img
  class="my-class-3"
  src="//repo.bfw.wiki/bfwrepo/icon/61f0871e2c420.gif"
/>

<script>
const manual = new Freezeframe('.my-class-3', {
  trigger: false
});

document
  .querySelector('.start')
  .addEventListener('click', () => {
    manual.start();
  });

document
  .querySelector('.stop')
  .addEventListener('click', () => {
    manual.stop();
  });
</script>

<!-- Example 4 -->

<p>with overlay icon.</p>

<img
  class="overlay"
  src="//repo.bfw.wiki/bfwrepo/icon/61f0871e2c420.gif"
/>

<div class="section">
  <p>using child elements</p>

  <div class="overlay">
    <div class="grid">
      <div class="cell">
        <img
          src="//repo.bfw.wiki/bfwrepo/icon/61f0871e2c420.gif"
        />
      </div>
      <div class="cell">
        <img
          src="//repo.bfw.wiki/bfwrepo/icon/61f0871e2c420.gif"
        />
      </div>
      <div class="cell">
        <img
          src="//repo.bfw.wiki/bfwrepo/icon/61f0871e2c420.gif"
        />
      </div>
      <div class="cell">
        <img
          src="//repo.bfw.wiki/bfwrepo/icon/61f0871e2c420.gif"
        />
      </div>
    </div>
  </div>
</div>

<script>
new Freezeframe('.overlay', {
  overlay: true
});
</script>

<!-- Example 5 -->

<p>destroy, remove event listeners.</p>

<button class="destroy">destroy</button>

<img
  class="my-class-5"
  src="//repo.bfw.wiki/bfwrepo/icon/61f0871e2c420.gif"
/>

<script>
const destroyable = new Freezeframe('.my-class-5', {
  overlay: true
});

document
  .querySelector('.destroy')
  .addEventListener('click', () => {
    console.log('click')
    destroyable.destroy();
  });
</script>


</body>
</html>

freezeframe.js是控制gif及webp动画的插件

网友评论0

vconsole.js

ntc.js

classie.js

jquery.wheelOfFortune.js

guagua.js

qrcode.js

tracking-min.js

Scratch.js

crossroads.js

jscapture.js