网页图标插件favico.js

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

 44704  471  查看评论 (7)
分享到微信朋友圈
X
网页图标插件favico.js ie兼容11

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页面。

相关插件-独立的部件,杂项

jQuery分享插件jquery.share.js

jQuery分享插件jquery.share.js享到QQ、微信、微博、google、in、tweeter等
  独立的部件
 117145  639

jQuery表格导出数据

将表格的数据导出到excel,csv,pdf或是直接打印
  独立的部件
 51337  566

jQuery社会华分享插件

jQuery社会华分享插件支持微信,QQ,新浪,人人等
  独立的部件
 42679  494

jquer网页打印插件PrintArea.js

jquery实现页面打印可局部打印
  独立的部件
 71804  404

讨论这个项目(7)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    korb 0
    2019/9/9 16:33:37
    SiriBen 0
    2017/1/6 17:01:31

    效果不错,只有角标能改变,其它摄像头和视频一直没有反应

    回复
    ua00 0
    2016/12/16 4:12:43

    能不能关照一下菜鸟级别的好吗,说的都听不懂 也不会用

    回复
    路七七 0
    2016/11/7 16:11:06
    伤心法西斯ls 0
    2015/11/2 22:11:10

    为什么我运行不起来啊。。

    回复
    56789a1987 0
    2015/5/23 15:53:43
    @☺荭苡★/aiq力崽 需要IE11+,另外请注意介绍中灰色字体的“说明”。 回复
    ☺荭苡★/aiq力崽 0
    2015/5/22 16:50:05
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复