网页图标插件favico.js

所属分类：其他-独立的部件,杂项

45010 471 查看评论 (7)

分享到微信朋友圈

查看演示 website 立即下载

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

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

说明：

1.插件在iframe框架中运行会失效，在线预览请点击页面右上角的“×”移除框架。
2.Chrome本地预览会出现canvas跨域问题，请换用其他浏览器或在IIS下部署。

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

示例用法：

引入favico.js文件，前提：网页需要有图标。

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

var favicon = new Favico({
                });

各种功能的用法：

设置角标：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	图标发生变动时执行的脚本