Question

我有许多div元素，每个元素都有一个背景图像。然而一些元素代表一个gif，当我将鼠标悬停在它们上面时，我希望播放gif并在鼠标退出时停止或重置它。

我看到许多带有图像标签的gif动画示例，但我似乎无法使用背景图像。

因此，对于每个Image，我都有gif的起始图像以及完整内容的.gif扩展名。

我在这里阅读这个问题以供参考：Start GIF On Mouse Hover and Pause Otherwise?

这让我想到了一个问题：什么是gif？

它是＆＃34;动画＆＃34;？的小图像集合我看到很多＆＃34;图像切片＆＃34;术语或具有循环以模拟动画的多个图像。但是可以通过html / css / js显示一个带有起始图像和.gif网址的gif吗？

＆＃13;

$container.on('mouseenter', ".gif", function (event) {
        var target = event.target;
        var $target = $(target);

        //play gif
        $target.css("background-image", "url(" + theGIFurl + ")");
    });

＆＃13;

.item gif{

  background-image: url(theJPGurl); /

}

＆＃13;

Answer 1

gif是一种位图图像。它曾经很受欢迎，因为它可以有透明像素（与jpg相反）。但在这方面，它被png取代，png通常较小，支持alpha透明度（gif像素完全透明或完全不透明），最重要的是，gif图像限制为256色。

gif图像的另一个壮举是他们的动画。您可能会从显示旋转信封或其他内容的旧网站上了解它们。

动画gif图像只是一个组合在一个文件中的图像集合。这样的文件还包含文件中的附加定时信息。但是，gif图像不是可以控制的智能对象。您无法使用JavaScript启动，停止，暂停或加速gif图像。它只包含框架，可以循环或不循环，但所有信息都在文件中。

因此，虽然您可以通过显示不同的图像来使用JavaScript或CSS进行动画处理，但这与仅显示动画gif不同。所以，也许最好调查其他技术。虽然GIF基本上非常简单，但它们的使用也非常有限。例如，您无法可靠地计算脚本以运行gif动画的结束。

-edit -

显然你可以（在FireFox中）pause a gif file。

Answer 2

＆＃13;

$container.on('mouseenter', ".gif", function (event) {
        var target = event.target;
        var $target = $(target);

        //play gif
        $target.css("background-image", "url(" + theGIFurl + ")");
    });

＆＃13;

.item gif{

  background-image: url(theJPGurl); /

}

＆＃13;

$container.on('mouseenter', ".gif", function (event) {
        var target = event.target;
        var $target = $(target);

        //play gif
        $target.css("background-image", "url(" + theGIFurl + ")");
    });

＆＃13;

.item gif{

  background-image: url(theJPGurl); /

}

＆＃13;

Answer 3

如果有人可以发表评论，我确实找到了解决这个问题的例子：

http://codepen.io/anon/pen/qbqvgy

＆＃13;

CGMutablePathRef

＆＃13;

div {
  width: 500px;
  height: 500px;
  background: url('http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg');
}

div:hover {
  background: url('https://media.giphy.com/media/V1T2JBmK03OFy/giphy.gifs');
}

＆＃13;

HTML / CSS / JS在悬停时显示gif，究竟什么是gif？

3 个答案: