分享几个实用的Javascript动态更新图标插件 | rin部落-web前端开发-主流web技术分享博客

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的固定页面元素。这个可以设置固定元素的切换

2014-03-31