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

随机推荐

Java实现的词频统计——单元测试
前言:本次测试过程中发现了几个未知字符,这里将其转化为十六进制码对其加以区分. 1)保存统计结果的Result文件中显示如图: 2)将其复制到eclipse环境下的切分方法StringTokenize ...
sysbench 环境安装，压测mysql
源码路径:https://github.com/akopytov/sysbench 版本linux 6.8sysbench 0.5mysql 5.6.29 1.安装pip略 2.pip 安装bzr p ...
CentOS 6.5安装配置LAMP服务器(Apache+PHP5+MySQL)
1.配置防火墙,开启80端口.3306端口vi /etc/sysconfig/iptables-A INPUT -m state --state NEW -m tcp -p tcp --dport 8 ...
phaser3 微信小游戏若干问题
纯属个人兴趣, 如有兴趣可共同参与维护. git: https://gitee.com/redw1234567/phaser3_wx image的地方需要修改,代码贴上 var ImageFile = ...
【C++】为多态基类声明virtual析构函数
来自<Effective C++>条款07:为多态声明virtual析构函数当derived class对象经由一个base class指针被删除,而该base class带着一个non ...
SWERC2015-I Text Processor
题意给一个长度为$n$的字符串$s$,再给定一个$w$,问对于所有的$i\in [1,n-w+1]$,$s[i..i+w-1]$有多少个不同字串.$n,w\le 10^5$. ...
Day21-自定义simple_tag/filter
一. 在模板里面对用户发过来的数据进行二次加工.想办法把Python的函数放到模板语言里面使用. 有2种方法:filter与simple_tag 二. 实例 {{name|lower}} trunca ...
JDBC连接SQL Server
下载jdbc驱动包下载地址,我下载的是exe版本的,其实是格自解压包.下载完毕之后,双击运行,会解压在当前目录下. Microsoft SQL Server JDBC Driver 3.0\sqlj ...
【JQuery】文档操作
一.前言接着上一章的内容,接着JQuery的学习二.内容 addClass 向被选元素添加一个或多个类 $(selector).addClass(class) $(selector).addCla ...
php扩展库说明
1 zlib是提供数据压缩用的函式库, 2 libxml2 Libxml2 is the XML C parser and toolkit developed for the Gnome projec ...