分享5個實用的Javascript動態更新表徵圖外掛程式

來源:互聯網
上載者:User
  • 最近訪問我部落格的人都在發現,每次訪問的時候表徵圖都會動態載入,給使用者留下了很好的使用者體驗,於是很多人給我留言,問我這個是如何?的,今天抽空寫了這樣一篇文章,分享一下實現的原理,如果你一直在使用Gmail時,你可能會發現,你發現在右下角“未讀郵件”表徵圖總是動態更新的表徵圖。在這篇文章中,我找到了5個外掛程式,將協助你動態更新表徵圖容易。你可以用於良好的使用者體驗
  • tinyconTinycon允許警報氣泡添加和改變的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的固定式頁面面元素。這個可以設定固定元素的切換
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.