Question

http://www.9gag.com

我想暂停并播放一个gif，就像9gag一样，

我该怎么做？

我知道我必须使用一个。 Jpg和。 Gif，但我尝试了一些但没有工作

我找到了这个功能

function is_gif_image(i) {
        return /^(?!data:).*\.gif/i.test(i.src);
    }

    function freeze_gif(i) {
        var c = document.createElement('canvas');
        var w = c.width = i.width;
        var h = c.height = i.height;
        c.getContext('2d').drawImage(i, 0, 0, w, h);
        try {
            i.src = c.toDataURL("image/gif"); // if possible, retain all css aspects
        } catch(e) { // cross-domain -- mimic original with all its tag attributes
            for (var j = 0, a; a = i.attributes[j]; j++)
                c.setAttribute(a.name, a.value);
            i.parentNode.replaceChild(c, i);
        }
    }

    function unfreeze_gif(id, src) {
     i = document.getElementById(id);
        i.src = src;
    }

但我不知道如何在HTML上使用

有人可以举个例子吗？用HTML，CSS E JS（或Jquery）？

由于

Answer 1

这只是图片的两个版本：一个静态JPG，一个移动GIF。

这是一个模仿行为的小提琴：http://jsfiddle.net/bortao/QADeM/

<强> JS

$(".gif-post").on("click", function () {
    var $this = $(this);
    var img = $this.find("img"); // Find the image element
    if (!this.playing) {
        this.playing = true; // Set or create a variable
        img.attr("src", img.attr("src").replace(".jpg", "a.gif"));
        $this.find(".play").hide(); // Hide the overlay
    } else {
        this.playing = false;
        img.attr("src", img.attr("src").replace("a.gif", ".jpg"));
        $this.find(".play").show();
    }
});

Answer 2

我自己正在制作一个9gag克隆，所以我也在寻找一个gif播放器。

你可以使用这个：http://freezeframe.chrisantonellis.com/

你需要做的就是包含javascript和.gif链接并添加以下类：“freezeframe”

还有一个：http://quickleft.com/blog/embeddable-animated-gifs-with-controls-just-in-time-for-christmas

我没有使用它，但它看起来非常有趣。

我怎么能像9 gag那样玩gif？

2 个答案: