您的位置：首页 > Web前端 > JavaScript

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

2016-04-16 16:55 706 查看

tinycon

Tinycon允许警报气泡添加和改变的favicon图像。以百分数的方式动态慢慢加载，支持主流浏览器，使用方法,

<html>
<head>
<link rel="icon" href="favicon.ico">
<title>Tinycon</title>

<script src="../tinycon.js"></script>
<script>
(function(){
var count = 0;//设置开始加载的百分数
setInterval(function(){
++count;
Tinycon.setBubble(count);

}, 1000);
})();
</script>
</head>
<body>
</body>
</html>

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

转载自:http://www.9958.pw/post/javascript_favicon

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航