Favico.js 是一个神奇的JS库,他可以在页面的favicon上增加角标,展示图像,甚至播放视频。好吧,在这个前端泛滥的年代,或许这个能给你的网站带来不一样的亮点。

你的favico够屌吗?不够?那就继续往下看!

Favico.js 可以让你在favicon上增加角标,还能动态改变角标的内容,你可以弄个数字或者其他图像,你还可以弄个视频在上。详细方法如下:

Slide animation

var favicon=new Favico({
    animation:'slide'
});
favicon.badge(1);


Fade animation

var favicon=new Favico({
    animation:'fade'
});
favicon.badge(2);


Pop animation

var favicon=new Favico({
    animation:'pop'
});
favicon.badge(3);


Pop & fade animation

var favicon=new Favico({
    animation:'popFade'
});
favicon.badge(1);


Without animation

var favicon=new Favico({
    animation:'none'
});
favicon.badge(2);


Position

var favicon=new Favico({
    position : 'up'
});
favicon.badge(3);


Shape setting

var favicon=new Favico({
    type : 'rectangle',
    animation: 'slide',
});
favicon.badge(1);


Attach to regular image

var favicon=new Favico({
    type : 'rectangle',
    elementId : 'badgeImage'
});
favicon.badge(2);


Color settings

var favicon=new Favico({
    bgColor : '#5CB85C',
    textColor : '#ff0',
});
favicon.badge(3);


Badge options

Attribute Default
bgColor #d00 Badge background color
textColor #fff Badge text color
fontFamily sans-serif Text font family (Arial, Verdana, Times New Roman, serif, sans-serif,...)
fontStyle bold Font style (normal, italic, oblique, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900)
type circle Badge shape (circle, rectangle)
position down Badge position (up, down)
animation slide Badge animation type (slide, fade, pop, popFade, none )
elementId false Image element ID if there is need to attach badge to regular image


更多的测试亲们可以去他们的网站上测试。

地址:http://lab.ejci.net/favico.js/