分享几个实用的Javascript动态更新图标插件

来源：互联网发布：deepin是linux吗编辑：程序博客网时间：2024/06/05 06:26

tinycon

enter image description here

Tinycon允许警报气泡添加和改变的favicon图像。以百分数的方式动态慢慢加载，支持主流浏览器，使用方法,

<html>    <head>        <link rel="icon" href="favicon.ico">        <title>Tinycon</title>        <script src="../tinycon.js"></script>        <script>            (function(){                var count = 0;//设置开始加载的百分数                setInterval(function(){                    ++count;                    Tinycon.setBubble(count);                }, 1000);            })();        </script>    </head>    <body>    </body></html>

Piecon

enter image description here

实现饼状图使你的！一个微小的JavaScript库，用于动态生成进度饼图在您的网站图示。使用方法

<script src="piecon.js"></script>  <script>  (function(){    var count =85;//设置加载数百分比    Piecon.setOptions({fallback: 'force'});    var i = setInterval(function(){      if (++count > 100) { Piecon.reset(); clearInterval(i); return false; }      Piecon.setProgress(count);    }, 250);  })();Piecon.setOptions({  color: '#ff0084', // 饼状图颜色  background: '#bbb', // 空饼状图颜色  shadow: '#fff', // 外圈颜色  fallback: false // 在标题切换显示的比例 (possible values - true, false, 'force')});

jQuery的图标通知

enter image description here

一个超级简单的插件的图标呈现的通知。你可以设定数的位置，图标的类型，文字和文字外形的颜色，使用方法

$.faviconNotify = function(icon, num, myPos, myBg, myFg) //icon-图标 ，num-数字，myPos-位置，myBg-背景颜色,myFg-字体颜色，//使用例子$.faviconNotify('/favicon.ico', 67, 'br', '#123456', '#ABCDEF');

myPos的取值范围：随机，向左，向右，向上，向下

$.faviconNotify('/favicon.ico', 12, 'tr')  //表示 用ico图标，数字显示为12，tr表示 top,right---右上$.faviconNotify('/favicon.ico', 56, 'tl');"//左上$.faviconNotify('/favicon.ico', 34, 'br');"//右下// 更新图标$('link[rel$=icon]').replaceWith('');$('head').append($('<link rel="shortcut icon" type="image/x-icon"/>').attr('href', canvas.toDataURL('image/png')));

jQuery的图标

favicon的固定页面元素。这个可以设置固定元素的切换

转载自:http://www.9958.pw/post/javascript_favicon

0 0