favico.js

角标

用动态的角标让你的网页图标动起来。你可以自定义动画类型，位置，背景颜色和文本颜色。

滑动动画

var favicon=new Favico({

    animation:'slide'

});

favicon.badge(1);

渐隐动画

var favicon=new Favico({

    animation:'fade'

});

favicon.badge(2);

弹出动画

var favicon=new Favico({

    animation:'pop'

});

favicon.badge(3);

弹出&渐隐动画

var favicon=new Favico({

    animation:'popFade'

});

favicon.badge(1);

无动画

var favicon=new Favico({

    animation:'none'

});

favicon.badge(2);

位置

var favicon=new Favico({

    position : 'up'

});

favicon.badge(3);

形状设置

var favicon=new Favico({

    type : 'rectangle',

    animation: 'slide',

});

favicon.badge(1);

自定义字体支持

var favicon=new Favico({

    fontFamily : 'FontAwesome',

    elementId : 'badgeFont'

});

favicon.badge('\f0a2');

颜色设置

var favicon=new Favico({

    bgColor : '#5CB85C',

    textColor : '#ff0',

});

favicon.badge(3);

回调函数

var favicon=new Favico({

    DataUrl : function(url){

        document.getElementById("elementId").innerHTML = "返回值：" + url;

    }

});

favicon.badge(1);

回调函数返回值

返回值：

图像 / 视频 / 摄像头

通过图像、视频甚至是摄像头来创建网页图标

常规图像到网页图标

var favicon=new Favico();

var image=document.getElementById('imageId');

favicon.image(image);

HTML5视频到网页图标

var favicon=new Favico();

var video=document.getElementById('videoId');

favicon.video(video);

//停止

favicon.video('stop');

摄像头到网页图标

这仅仅是为了好玩，但是它可以运行:)
适用于 Chrome, Firefox 和 Opera 

var favicon=new Favico();

favicon.webcam();

//停止

favicon.webcam('stop');

角标选项

属性 默认值
bgColor #d00 角标背景颜色
textColor #fff 角标文字颜色
fontFamily sans-serif 文字字体家族 (Arial, Verdana, Times New Roman, serif, sans-serif,...)
fontStyle bold 字体样式 (normal, italic, oblique, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900)
type circle 角标形状 (circle（圆形）, rectangle（方形）)
position down 角标位置 (up（上方）, down（下方）, left（左方）, upleft（左上）)
animation slide 角标动画类型 (slide（滑动）, fade（渐隐）, pop（弹出）, popFade（弹出&渐隐）, none（无） )
elementId false 如果要把角标显示在某一图像元素上，可以在这里输入图像元素的ID
element false 如果要把角标作为一个元素显示（图像元素），可以在这里选择元素（用选择器）
dataUrl false 图标发生变动时执行的脚本

Bower

bower install favico.js

相关插件 Tinycon, Notify Better 或 favicon.js.

路线图

许可