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

  • 最近访问我博客的人都在发现，每次访问的时候图标都会动态加载，给用户留下了很好的用户体验，于是很多人给我留言，问我这个是如何实现的，今天抽空写了这样一篇文章，分享一下实现的原理，如果你一直在使用Gmail时，你可能会发现，你发现在右下角“未读邮件”图标总是动态更新的图标。在这篇文章中，我找到了5个插件，将帮助你动态更新图标容易。你可以用于良好的用户体验
  • tinyconTinyconTinycon允许警报气泡添加和改变的favicon图像。以百分数的方式动态慢慢加载，支持主流浏览器，使用方法,
  •  1 <html>
 2     <head>
 3         <link rel="icon" href="favicon.ico">
 4         <title>Tinycon</title>
 5         
 6         <script src="../tinycon.js"></script>
 7         <script>
 8             (function(){
 9                 var count = 0;//设置开始加载的百分数
10                 setInterval(function(){
11                     ++count;
12                     Tinycon.setBubble(count);
13 
14                 }, 1000);
15             })();
16         </script>
17     </head>
18     <body>
19     </body>
20 </html>

    DEMO


  • PieconPiecon实现饼状图使你的！一个微小的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的图标通知jQuery的图标通知一个超级简单的插件的图标呈现的通知。你可以设定数的位置，图标的类型，文字和文字外形的颜色，使用方法
  • $.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的图标jQuery的图标favicon的固定页面元素。这个可以设置固定元素的切换
posted @ 2012-10-25 17:14  创想中国(羲闻)  阅读(4141)  评论(13)  编辑  收藏  举报