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

本文转载自查看原文 2012-10-25 17:14 3718 前端开发/ jQuery

最近访问我博客的人都在发现，每次访问的时候图标都会动态加载，给用户留下了很好的用户体验，于是很多人给我留言，问我这个是如何实现的，今天抽空写了这样一篇文章，分享一下实现的原理，如果你一直在使用Gmail时，你可能会发现，你发现在右下角“未读邮件”图标总是动态更新的图标。在这篇文章中，我找到了5个插件，将帮助你动态更新图标容易。你可以用于良好的用户体验

tinycon

Tinycon允许警报气泡添加和改变的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

Piecon

实现饼状图使你的！一个微小的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的图标通知

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

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

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 pycharm插件实用合集- 不断更新 Office customUI中如何动态更新控件标题和图标？动态更新Toolbar Menu以及Menu中同时显示文字和图标分享一个自己写的简单的自动更新插件各类实用网站分享分享一个jQuery动态网格布局插件：Masonry jquery chosen 插件动态设置+更新选项值实用Javascript调试技巧 vs实用插件 Chrome实用插件