分享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實用插件