这个答案是在Sourabh的基础上建立的,他指出了一个HTML/CSS/JavaScript组合,可以在
https://codepen.io/hoanghals/pen/dZrWLZ找到。我尝试了一下,并制作了一个包括CSS和JavaScript的完整网页,在我的网站上进行了测试。由于CodePens经常会消失,所以我决定在这里展示它。我还展示了一个简化的、剥离到必要元素的版本,以演示需要做的最少工作。
我还必须注意一件事。上面链接中的代码,Sourabh复制的JavaScript引用了一个JavaScript构造函数
SuperGif()
。我不认为Sourabh解释过这个,CodePen也没有。一个简单的搜索显示,它在buzzfeed/libgif-js中定义,可以从
https://github.com/buzzfeed/libgif-js#readme下载。找到下面红色箭头指向的控件,然后点击绿色的“Code”按钮。(注:你看不到红色箭头:那是我告诉你在哪里查找。)
![Screenshot of GitHub page for buzzfeed/libgif-js](https://istack.dev59.com/Ym6Av.webp)
一个菜单将弹出,提供各种选项,包括下载一个zip文件。下载它,并将其解压缩到您的HTML目录或其子目录中。
接下来,我将展示我制作的两个页面。第一个是从CodePen派生的。第二个则脱离了其基本要素,并显示了使用SuperGif所需的最小限度。
这是第一页的完整HTML、CSS和JavaScript代码。在HTML的head部分有一个链接到libgif.js,这是您从zip文件中需要的文件。然后,HTML的body部分以一些关于猫图片的文本开头,并跟随一个动画猫GIF的链接https://media.giphy.com/media/Byana3FscAMGQ/giphy.gif。
然后继续一些CSS。CodePen使用SCSS,对于任何不知道的人来说,SCSS必须被预处理为CSS。我已经做到了,因此下面的代码是真正的CSS。
最后,就是JavaScript了。
<html>
<head>
<script src="libgif-js-master/libgif.js"></script>
</head>
<body>
<div style="width: 600px; margin: auto; text-align: center; font-family: arial">
<p>
And so, the unwritten law of the internet, that any
experiment involving video/images must involve cats in
one way or another, reared its head again. When would
the internet's fascination with cats come to an end?
Never. The answer is "Never".
</p>
<img src='https://media.giphy.com/media/Byana3FscAMGQ/giphy.gif' class='gif' />
</div>
<style>
img.gif {
visibility: hidden;
}
.jsgif {
position: relative;
}
.gifcontrol {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
cursor: pointer;
transition: background 0.25s ease-in-out;
z-index: 100;
}
.gifcontrol:after {
transition: background 0.25s ease-in-out;
position: absolute;
content: "";
display: block;
left: calc(50% - 25px);
top: calc(50% - 25px);
}
.gifcontrol.loading {
background: rgba(255, 255, 255, 0.75);
}
.gifcontrol.loading:after {
background: #FF9900;
width: 50px;
height: 50px;
border-radius: 50px;
}
.gifcontrol.playing {
/* Only show the 'stop' button on hover */
}
.gifcontrol.playing:after {
opacity: 0;
transition: opacity 0.25s ease-in-out;
border-left: 20px solid #FF9900;
border-right: 20px solid #FF9900;
width: 50px;
height: 50px;
box-sizing: border-box;
}
.gifcontrol.playing:hover:after {
opacity: 1;
}
.gifcontrol.paused {
background: rgba(255, 255, 255, 0.5);
}
.gifcontrol.paused:after {
width: 0;
height: 0;
border-style: solid;
border-width: 25px 0 25px 50px;
border-color: transparent transparent transparent #ff9900;
}
</style>
<script>
var gifElements = document.querySelectorAll('img.gif');
for(var e in gifElements) {
var element = gifElements[e];
if(element.nodeName == 'IMG') {
var supergif = new SuperGif({
gif: element,
progressbar_height: 0,
auto_play: false,
});
var controlElement = document.createElement("div");
controlElement.className = "gifcontrol loading g"+e;
supergif.load((function(controlElement) {
controlElement.className = "gifcontrol paused";
var playing = false;
controlElement.addEventListener("click", function(){
if(playing) {
this.pause();
playing = false;
controlElement.className = "gifcontrol paused";
} else {
this.play();
playing = true;
controlElement.className = "gifcontrol playing";
}
}.bind(this, controlElement));
}.bind(supergif))(controlElement));
var canvas = supergif.get_canvas();
controlElement.style.width = canvas.width+"px";
controlElement.style.height = canvas.height+"px";
controlElement.style.left = canvas.offsetLeft+"px";
var containerElement = canvas.parentNode;
containerElement.appendChild(controlElement);
}
}
</script>
</body>
</html>
当我将页面放在我的网站上并显示时,顶部看起来是这样的:
![Web page with paused animated GIF of cat](https://istack.dev59.com/rc5xk.webp)
当我按下粉色按钮时,页面就会变成这个样子,并且GIF开始动画。(猫舔着从水龙头滴落的水。)
![Web page with running animated GIF of cat](https://istack.dev59.com/bHP1G.webp)
结束时,这是第二个简单的页面。与第一个不同,它没有花哨的播放/暂停控件来改变形状:它只有两个按钮。代码唯一不必要的功能是禁用不相关的按钮,并在按钮之间插入一些空格。
<html>
<head>
<script src="libgif-js-master/libgif.js"></script>
</head>
<body>
<button type="button" onclick="play()"
id="play_button"
style="margin-right:9px;"
>
Play
</button>
<button type="button" onclick="pause()"
id="pause_button"
>
Pause
</button>
<img src="https://media.giphy.com/media/Byana3FscAMGQ/giphy.gif"
id="gif"
/>
<script>
var gif_element = document.getElementById( "gif" );
var supergif = new SuperGif( {
gif: gif_element,
progressbar_height: 0,
auto_play: false
} );
supergif.load();
function play()
{
var play_button = document.getElementById( "play_button" );
play_button.disabled = true;
var pause_button = document.getElementById( "pause_button" );
pause_button.disabled = false;
supergif.play();
}
function pause()
{
var play_button = document.getElementById( "play_button" );
play_button.disabled = false;
var pause_button = document.getElementById( "pause_button" );
pause_button.disabled = true;
supergif.pause();
}
pause_button.disabled = true;
</script>
</body>
</html>
这个加上libgif-js中的example.html文件,应该足以让任何人入门。