favico.js笔记

1. favicon.js是什么

一个js库可以使用徽标、图像、视频等来设置网页的favicon，即网页标题栏上的小图标。

2. 如何使用

2.1 使用徽标

basic demo：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>favico.js study</title>

        <!--设置网页标题小图标-->

        <link rel="shortcut icon" href="imgs/favicon.png" type="image/x-icon">

    </head>

    <body>

<script type="text/javascript" src="js/favico.js"></script>

<script type="text/javascript">

    var favicon=new Favico({

        animation:"popFade"

    });

    //使用徽标

    favicon.badge(3);

</script>

    </body>

</html>

效果：

使用徽标适合用来显示未处理消息数之类的信息，比较智能的是如果传入的数是<=0的话就不会显示徽标。

支持的选项：

属性名	说明	默认值
bgColor	徽标的背景颜色	#d00
textColor	徽标的文本颜色	#fff
fontFamily	徽标使用的文本	sans-serif
fontStyle	徽标的字体样式	bold
type	徽标的形状，可以选择circle或者rectangle	circle
position	徽标在整个小图标的定位，可选的有up, down, left, upleft	down
animation	徽标显示的动画，可选的有slide, fade, pop, popFade, none	slide
elementId	传入一个图像id可以将徽标绑定到图像上，那么标题栏的那个就不会再进行绑定了，某些时候也许会用得到吧	false
element	木研究	false
dataUrl	木研究	false

2.2 使用图像

直接传入一个图像元素，即可动态的设置favicon：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>favico.js study</title>

        <!--设置网页标题小图标-->

        <link rel="shortcut icon" href="imgs/favicon.png" type="image/x-icon">

    </head>

    <body>

        <img id="panda" src="imgs/panda.png" />

<script type="text/javascript" src="js/favico.js"></script>

<script type="text/javascript">

    var panda=document.getElementById("panda");

    var favicon=new Favico();

    favicon.image(panda);

</script>

    </body>

</html>

2.3 使用视频

使用视频可以绑定一个视频元素video标签，在播放这个视频的时候会将当前video的画面同步到网页图标上。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>favico.js study</title>

        <!--设置网页标题小图标-->

        <link rel="shortcut icon" href="imgs/favicon.png" type="image/x-icon">

    </head>

    <body>

        <video id="fooVideo" controls="controls" src="videos/004_打企鹅-更换背景.mp4">您的浏览器不滋持h5标签</video>

<script type="text/javascript" src="js/favico.js"></script>

<script type="text/javascript">

    var fooVideo=document.getElementById("fooVideo");

    var favicon=new Favico();

    favicon.video(fooVideo);

</script>

    </body>

</html>

效果：

可以使用favicon.video(“stop”); 停掉同步。

2.4 使用摄像头

摄像头坏了….（长的丑不敢露头…o(╯□╰)o）

3. 总结

使用favicon.js可以动态的操作网页图标，可以设置为徽标、图像、视频、摄像头。

一个可能的场景是在播放音乐的时候随着强弱网页图标上显示不同的信号强度，看上去可能会酷一些。

favico.js笔记的更多相关文章

Data Visualization and D3.js 笔记(1)
课程地址: https://classroom.udacity.com/courses/ud507 什么是数据可视化? 高效传达一个故事/概念,探索数据的pattern 通过颜色.尺寸.形式在视觉上表 ...
js笔记-0
#js笔记-0 数组: indexOf方法: Array也可以通过indexOf()来搜索一个指定的元素的位置: var arr = [10, 20, '30', 'xyz']; arr.indexO ...
PPK谈JS笔记第一弹
以下内容是读书笔记,再一次温习JS好书:PPK谈JS window.load＝initializePageaddEventSimple('window','load',function(){}) lo ...
面向小白的JS笔记 - #Codecademy#学习笔记
前言最初浏览过<JavaScript秘密花园>,前一段时间读过一点点<JavaScript语言精粹>和一点点<JavaScript高级程序设计>(一点点是指都只是 ...
require.js笔记
笔记参考来源:阮一峰 http://www.ruanyifeng.com/blog/2012/10/javascript_module.html 1. 浏览器端的模块只能采用“异步加载”方式 = ...
JS笔记入门第四
小测试: 注意:取消所有的设定可以直接使用 document.getElementById("txt").removeAttribute("style"); 这 ...
JS笔记入门第二
输出内容 document.write(); alert("hello!"); alert(mynum); </script> 注:alert弹出消息对话框(包含一个确 ...
Node.js笔记1
Node.js入门笔记 1. node -help 可以显示帮助信息2. node REPL 模式(Read-eval-print loop) 输入—求值—输出循环直接在cmd输入node 可以进入 ...
JS笔记入门第一
WHY? 一.你知道,为什么JavaScript非常值得我们学习吗? 1. 所有主流浏览器都支持JavaScript. 2. 目前,全世界大部分网页都使用JavaScript. 3. 它可以让网页呈现 ...

随机推荐

hadoop对于压缩文件的支持
转载:https://www.cnblogs.com/ggjucheng/archive/2012/04/22/2465580.html hadoop对于压缩格式的是透明识别,我们的MapReduce ...
IDEA中Git的更新/提交/还原方法
记录一下在IDEA上怎样将写的代码提交到GitHub远程库: 下面这个图是基本的提交代码的顺序: 1. 将代码Add到stage暂存区本地修改了代码后,需先将代码add到暂存区,最后才能真正提价到gi ...
java 基础 --集合--013
1, contains()方法底层依赖的是equals()方法,而定义的类中没有equal()方法,所以它会使用父类Object中的equals()方法,而Object的equals()方法比较的是地 ...
[LeetCode] MaximumDepth of Binary Tree
Given a binary tree, find its maximum depth. The maximum depth is the number of nodes along the long ...
洛谷P1658 购物
题目戳题目描述你就要去购物了,现在你手上有N种不同面值的硬币,每种硬币有无限多个.为了方便购物,你希望带尽量少的硬币,但要能组合出1到X之间的任意值. 输入输出格式输入格式: 第一行两个数X.N ...
【比赛】HNOI2018 排列
这题原题... 这题题面七绕八绕,有点麻烦,反正最后转化就是一棵树,每个点有一个值,要把所有点选完,要求选择一个点必须是它的父亲和祖先已经全部被选了,贡献是这个点的权值乘上它被选择的排名如果一个点是 ...
基于注解的spring mvc 中使用 ajax json 的model
在 Spring mvc3中,响应.接受 JSON都十分方便. 使用注解@ResponseBody可以将结果(一个包含字符串和JavaBean的Map),转换成JSON. 使用 @RequestBod ...
洛谷 P4240 毒瘤之神的考验解题报告
P4240 毒瘤之神的考验题目背景 \(\tt{Salamander}\)的家门口是一条长长的公路. 又是一年春天将至,\(\tt{Salamander}\)发现路边长出了一排毒瘤! \(\tt{S ...
SCWS中文分词，demo演示
上文已经讲了关于SCSW中文分词的安装配置,本节进入demo演示: <?php header('Content-Type:text/html;charset=UTF-8'); echo '< ...
专题训练之数位DP
推荐以下一篇博客:https://blog.csdn.net/wust_zzwh/article/details/52100392 1.(HDOJ2089)http://acm.hdu.edu.cn/ ...