freezeframe实现gif悬浮播放动画控制效果代码-html代码-BFW代码库

freezeframe实现gif悬浮播放动画控制效果代码

代码语言：html

所属分类：其他

代码描述：freezeframe实现gif悬浮播放动画控制效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!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(&#.........完整代码请登录后点击上方下载按钮下载查看