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. 它可以让网页呈现 ...

随机推荐

windows下面安装python3遇到的没有添加到环境变量的问题
windows下面安装python3出现的问题在官网上面下载最新版的安装包进行安装,并勾选Add Python 3.5 to PATH 安装的过程中可能会出现没有添加到PATH路径的情况默认的安装 ...
puppeteer设置代理并检查代理是否设置成功
1. 设置代理: 这一步超级简单,但我掉到了坑里并扑腾了小一天的时间,那就是:箭头指向处一定一定不要加空格!!! 2. 检查代理是否设置成功: 在打开的浏览器里,打开百度,输入ip,如果查出来的结果跟 ...
eclipse官方网址、各个版本的下载
Eclipse3.1后各版本代号 (2013-07-10 20:48:42) 转载▼ 分类: Java Eclipse 3.1 版本代号 IO [木卫1,伊奥] Eclipse 3.2 版本代号 ...
Spring Cloud构建微服务架构
Dalston版本由于Brixton和Camden版本的教程已经停止更新,所以笔者计划在2017年上半年完成Dalston版本的教程编写(原计划完成Camden版本教程,但由于写了两篇Dalston ...
BZOJ4950 Wf2017Mission Improbable（二分图匹配）
先给每个非零格子-1以满足俯视图不变.于是就相当于要求每行每列最大值不变.能减少剩余箱子的唯一方法是在要求相同的行列的交叉处放箱子以同时满足两个需求.给这些行列连边跑二分图匹配即可.注意必须格子初始时 ...
Repository HDU - 2846 （trie）
题中没给范围所以控制不好数组范围..不是超内存就是runtime.. 好吧到了晚上终于调出来数组模拟的了题意: 求含有某字符段的个数解析: 把每个字符串遍历一遍以每个元素为起点建树就好了.. ...
Intel WIDI (Wireless Display) 相关技术知识分析
一. WIFI 1.如何查找WIFI设备非p2p设备 Beacons 包(同步,SSID) 速率 1M/s 2.4G HZ 13个信道,1,6,11三个信道不重叠 2.P2P 认证客户端在每个通道 ...
聊聊flink的AsyncWaitOperator
序本文主要研究一下flink的AsyncWaitOperator AsyncWaitOperatorflink-streaming-java_2.11-1.7.0-sources.jar!/org/a ...
Docker学习笔记五：Docker生成jenkins容器，支持Java Web项目持续集成、持续部署
一.创建jenkins容器: 1.拉取jeknin镜像 sudo docker pull jenkins 2.创建一个jenkins目录 sudo mkdir /jenkins 3.在jenkins目 ...
CVE-2017-16995 Ubuntu16.04本地提权漏洞复现
0x01 前言该漏洞由Google project zero发现.据悉,该漏洞存在于带有 eBPF bpf(2)系统(CONFIG_BPF_SYSCALL)编译支持的Linux内核中,是一个内存任意 ...