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

随机推荐

QHash和QMultiHash使用
版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:QHash和QMultiHash使用本文地址:http://techieliang. ...
超强汇总！110 道 Python 面试笔试题
https://mp.weixin.qq.com/s/hDQrimihoaHSbrtjLybZLA 今天给大家分享了110道面试题,其中大部分是巩固基本python知识点,希望刚刚入手python,对 ...
javascript之容易出错的地方
1: 不是所有的非空对象都有toString()方法的 var obj = Object.create(null); console.log(obj.toString()); // false; ...
PHP中与类有关的几个魔术常量
与类有关的魔术常量: 以前学过的魔术常量: __FILE__ __DIR__ __LINE__ 现在: __CLASS__: 代表当前其所在的类的类名: __METHOD__:代表其当前所在的方法名:
virtio是啥子
这个山头今天好像要攻占下来了 guest os中的一些特权操作会被hypervhisor给接收,这里一个很重要的认识是:hypervisor是os的os,既然要访问资源,那么就需要经过整机资源的管理者 ...
【bzoj2300】[HAOI2011]防线修建离线+STL-set维护凸包
题目描述给你(0,0).(n,0).(x,y)和另外m个点,除(0,0)(n,0)外每个点横坐标都大于0小于n,纵坐标都大于0. 输入第一行,三个整数n,x,y分别表示河边城市和首都是(0,0), ...
【刷题】BZOJ 1195 [HNOI2006]最短母串
Description 给定n个字符串(S1,S2,„,Sn),要求找到一个最短的字符串T,使得这n个字符串(S1,S2,„,Sn)都是T的子串. Input 第一行是一个正整数n(n<=12) ...
unity3d模型不接受光照
9楼发表于 2015-4-21 16:34 | 只看该作者 sailo 发表于 2015-4-14 11:15 你好.遇到同样问题,请问要什么解决 1.你可以选择你不受光线照射的模型,模型属性lay ...
解题：POI 2013 Taxis
题面设当前位置为$pos$,那么可以发现在出租车总部左侧时,每辆车的贡献是$x[i]-(d-pos)$,而在右侧时只有$x[i]>=m-d$的车能够把人送到,那么首先我们要找出最小的满足$x[ ...
【2016北京集训】Mushroom
Portal --> broken qwq Description 一开始有个蘑菇,蘑菇里面有$n$个房间,是一棵有根树,$1$号是根,每个房间里面都有杂草,现在要支持以下操作:将某个指 ...