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-