网页图标插件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	图标发生变动时执行的脚本

});

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

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com