道招

让你的favicon以饼状图显示加载进度

如果您发现本文排版有问题,可以先点击下面的链接切换至老版进行查看!!!

让你的favicon以饼状图显示加载进度

Piecon 是一个用来实现在你的网站的 favicon 上显示进度消息的一个小型 js 库。 piecon 基本用法: [code] Piecon.setProgress(12); Piecon.setProgress(25); ... Piecon.reset(); [/code] 选项 [code] Piecon.setOptions({ color: '#ff0084', // Pie chart color background: '#bbb', // Empty pie chart color shadow: '#fff', // Outer ring color fallback: false // Toggles displaying percentage in the title bar (possible values - true, false, 'force') }); [/code] 支持浏览器:
  • Chrome 15+
  • Firefox 9+
  • Opera 11+
对不支持的浏览器会修改标题:
  • Internet Explorer 9
  • Safari 5+
在线演示:http://lipka.github.com/piecon/ 演示页面比较笼统,为了方便大家,特将官方演示页面的完整代码(不包含css)贴出 index.html [code] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>演示favicon饼状图</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="icon" href="favicon.ico" /> <script type="text/javascript" src="piecon.mini.js"></script> <script> (function(){ var count = 0; Piecon.setOptions({fallback: 'force'}); var i = setInterval(function(){ if (count++ > 100) { Piecon.reset(); clearInterval(i); return false; } Piecon.setProgress(count); }, 250); })(); </script> </head> <body> </body> </html> [/code] 官方的设置是count从0一直加到100,本人认为效果并不好,给人一种网页加载很漫长的感觉,不如直接把步长设置为25,而非为1。 核心js文件 piecon.mini.js代码如下 [code] (function() { var i = {}, j = null, k = null, f = null, g = null, h = {}, l = { color: "#ff0084", background: "#bbb", shadow: "#fff", fallback: !1 }, c, o = navigator.userAgent.toLowerCase(); c = function(e) { return - 1 !== o.indexOf(e) }; var p = c("msie"); c("chrome"); c("chrome") || c("safari"); var q = c("safari") && !c("chrome"); c("mozilla") && !c("chrome") && c("safari"); var m = function(e) { for (var a = document.getElementsByTagName("link"), c = document.getElementsByTagName("head")[0], f = 0, h = a.length; f < h; f++)("icon" === a[f].getAttribute("rel") || "shortcut icon" === a[f].getAttribute("rel")) && c.removeChild(a[f]); a = document.createElement("link"); a.type = "image/x-icon"; a.rel = "icon"; a.href = e; document.getElementsByTagName("head")[0].appendChild(a) }, n = function() { g || (g = document.createElement("canvas"), g.width = 16, g.height = 16); return g }; i.setOptions = function(e) { h = {}; for (var a in l) h[a] = e.hasOwnProperty(a) ? e[a] : l[a]; return this }; i.setProgress = function(e) { f || (f = document.title); if (!k || !j) { var a; a: { a = document.getElementsByTagName("link"); for (var c = 0, i = a.length; c < i; c++) if ("icon" === a[c].getAttribute("rel") || "shortcut icon" === a[c].getAttribute("rel")) { a = a[c]; break a } a = !1 } k = j = a ? a.getAttribute("href") : "/favicon.ico" } if (!isNaN(parseFloat(e)) && isFinite(e)) if (!n().getContext || p || q || !0 == h.fallback) document.title = 0 < e ? "(" + e + "%) " + f: f; else { "force" === h.fallback && (document.title = 0 < e ? "(" + e + "%) " + f: f); var g = e, b = n(), d = b.getContext("2d"), g = g || 0, e = j; a = new Image; a.onload = function() { if (d) { d.clearRect(0, 0, 16, 16); d.beginPath(); d.moveTo(b.width / 2, b.height / 2); d.arc(b.width / 2, b.height / 2, Math.min(b.width / 2, b.height / 2), 0, Math.PI * 2, false); d.fillStyle = h.shadow; d.fill(); d.beginPath(); d.moveTo(b.width / 2, b.height / 2); d.arc(b.width / 2, b.height / 2, Math.min(b.width / 2, b.height / 2) - 2, 0, Math.PI * 2, false); d.fillStyle = h.background; d.fill(); if (g > 0) { d.beginPath(); d.moveTo(b.width / 2, b.height / 2); d.arc(b.width / 2, b.height / 2, Math.min(b.width / 2, b.height / 2) - 2, -0.5 * Math.PI, ( - 0.5 + 2 * g / 100) * Math.PI, false); d.lineTo(b.width / 2, b.height / 2); d.fillStyle = h.color; d.fill() } m(b.toDataURL()) } }; e.match(/^data/) || (a.crossOrigin = "anonymous"); a.src = e } else return ! 1 }; i.reset = function() { f && (document.title = f); k && (j = k, m(j)) }; i.setOptions(l); window.Piecon = i })(); [/code]
更新时间:
上一篇:jQuery网格插件ParamQuery下一篇:searchpath让你的网站在当前直接显示搜索结果

相关文章

js网页特效:星星闪动的标题栏特效

js网页特效:星星闪动的标题栏特效实现此功能其实很简单的。 要完成此效果加入如下代码 title_tmp1 = document.title if (title_tmp1.indexOf("&g 阅读更多…

searchpath让你的网站在当前直接显示搜索结果

每一个网站都应该有搜索功能吧,是不是厌烦了在输入搜索词回车后跳转到另一个页面了啊,呵呵,如果你喜欢很酷的显示方式,并且数据量也不是特别大,那么现在就有一个很简单的解决方案哦。 还支持“显示 阅读更多…

完美取消simlple-m主题的首页伸缩效果

你可能不喜欢 取消simlple-m主题的首页伸缩效果 里面的方法,毕竟那个方法有弊端,但是很方便。 我们知道,在simple-m主题的header.php文件里面加载了jquery.min.1 阅读更多…

分享个儿时的90坦克javascript版

效果图如下 首先是主页面tanke.php [code lang="php"] &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 阅读更多…

关注道招网公众帐号
道招开发者二群