给你的网站图标加上一个徽章 – Favico.js

favico.js是一款网页图标插件,让网页图标动起来。通过此插件您可以:在图标上增加角标、把网页中的图片设置为图标,甚至在图标上播放视频和启动摄像头!

favico.js

说明:

1.插件在iframe框架中运行会失效,在线预览请点击页面右上角的“×”移除框架。

2.Chrome本地预览会出现canvas跨域问题,请换用其他浏览器或在IIS下部署。

favico.js是一个独立的轻量级JS插件,无需JQuery等支持,所以使用起来是非常简单的,只需引入favico.js一个文件即可,角标的样式均可自行定义。

用法

引入favico.js文件,CDN文件:http://www.bootcdn.cn/favico.js/

前提:网页需要有图标。

首先需要创建一个Favico实例,然后就可以使用了

var favicon = new Favico({
                });<br>

各种功能的用法:

设置角标:favicon.badge(角标内容);

var badge = 5;
 favicon.badge(badge);

重置图标(恢复网页原图标):

favicon.reset();

设置图像:favicon.image(图像元素);

//var favicon = new Favico();
 var image = document.getElementById('imageId');
 favicon.image(image);

播放视频(Firefox也会出现跨域问题,请在服务器环境下运行):favicon.video(视频元素);

//var favicon = new Favico();
 var video = document.getElementById('videoId');
 favicon.video(video);

停止视频:

favicon.video('stop');

启动摄像头:

//var favicon = new Favico();
 favicon.webcam();

停止摄像头:

favicon.webcam('stop');

选项说明

var favicon = new Favico({**** });
选项名称 默认值 说明
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 图标发生变动时执行的脚本

更详细的示例请参见demo页面

-END-

分享到:
赞(0)