Question

我想在浏览其他浏览器标签时通知用户新的传入消息。

首先，我必须设置一个闪烁的红色机器人作为图标（这里的问题是谷歌Chrome不支持GIF动画作为图标）

$('#favicon').attr('href','_/css/img/favicon.gif');

有没有办法循环显示两个图像，一个是红色，一个是白色，每个500毫米？

setInterval(function() {
    $('#favicon').attr('href','_/css/img/red.png');
}, 500);

如何为两个图标进行500毫秒的循环？

Answer 1

使用变量并在每次更改时切换：

var red=1; 
setInterval(function() {  
    if (red==1) { 
        red=0;
        $('#favicon').attr('href','_/css/img/white.png');
    } else { 
       red=1;
       $('#favicon').attr('href','_/css/img/red.png');
    }
}, 500);

Answer 2

简单Javascript它是最简单的解决方案，已经给出了这样的答案。

作为替代方案，您可以使用favicon.js播放视频作为图标。您可以通过将现有GIF转换为视频然后使用favicon.js播放来实现此目的。此解决方案的优点是您的动画可以像您想要的那样复杂。

动画Favicon通知

2 个答案: