分享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的固定页面元素。这个可以设置固定元素的切换
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
回答: 在VSCode中,有很多常用的图标插件可以帮助我们更好地管理和识别文件类型。其中一些常用的图标插件包括: 1. VSCode Icons: 这是一个非常受欢迎的图标插件,它为不同类型的文件和文件夹提供了美观的图标,使得文件结构更加清晰易读。 2. Material Icon Theme: 这个插件提供了一套漂亮的Material Design风格的图标,可以根据文件类型和文件夹进行分类和显示。 3. File Icons: 这个插件为不同的文件类型提供了独特的图标,使得文件在视觉上更易于区分和识别。 4. vscode-icons-js: 这个插件提供了一套丰富的JavaScript相关图标,包括函数、类、模块等,方便开发者在代码中快速识别和导航。 这些插件可以根据个人喜好和需求进行选择和安装,可以通过在VSCode的扩展商店中搜索插件名称来找到并安装它们。 #### 引用[.reference_title] - *1* [千锋重庆web前端技术分享之前端VSCode常用插件](https://blog.csdn.net/qf2019/article/details/114626754)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [VSCode 最全实用插件(VIP典藏版)](https://blog.csdn.net/libusi001/article/details/124309613)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值