-
Notifications
You must be signed in to change notification settings - Fork 38
/
index.html
130 lines (125 loc) · 7.28 KB
/
index.html
1
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <title>placeholder.js - Client side image placeholders / placeholder.cn - Quick and simple image placeholders</title> <meta name="keywords" content="placeholder.js,placeholder.cn,placeholder,placeholders,images placeholders,image placeholder creator,client placeholder,holder.js,holderjs"> <meta name="description" content="placeholder.cn is a Quick and simple image placeholders, placeholder.js is a Client-side library generate image placeholders. Do not depends on jQuery or Other. Create free images placeholders for your web design / print projects."> <style type="text/css"> body{padding:0;margin:0;font-family:sans-serif;background:#fff}body.etc{font-family:"Droid Sans","FreeSans",sans-serif}a{color:#5c9f7e}a:hover{color:#4d8569}a,a:hover{transition:color .1s ease-in}h1,h2{margin:0;letter-spacing:-1px}h2.ie{font:3em inherit;color:red;position:fixed;top:0;margin:0;z-index:2;width:100%;background:yellow}#content{position:absolute;z-index:1;top:120px;left:0;height:230px;color:#555;font-size:12px}#content-inner{padding:20px;overflow:hidden;width:800px}.block{float:left;width:200px;margin-right:40px}#server_holder{width: 240px;padding-left:10px;border-left: 1px dashed #ccc;margin-right:0;} #details{width:240px}.block.header h1{margin-bottom:20px;color:#78c9a9;font-size:24px}.block h2{color:#aaa;font-size:16px;line-height:20px;margin-bottom:8px}.block.fluid{width:auto}.block p{margin:0;margin-bottom:6px;line-height:16px}.block code{border-radius:4px;font-size:12px;font-family:'Lucida Console',monospace;background:#eee;text-align:left;display:block;padding:4px;white-space:nowrap}#download{background:#78c9a9;display:block;text-align:center;font-weight:bold;color:#fff;padding:4px 0;font-size:14px;border-radius:4px;text-decoration:none;text-shadow:0 1px 0 rgba(0,0,0,0.2);box-shadow:0 0 0 #69b094}#download:hover{box-shadow:0 2px 0 #69b094}#download,#download:hover{transition:all .1s ease-out}#background{position:fixed;z-index:2;}#background img{position:absolute;display:block} </style></head><body> <div id="content"> <div id="content-inner" itemprop="articleBody"> <div class="block header"> <h1 itemprop="name"><a itemprop="url" href=".">placeholder.js</a></h1> <p> placeholder.js renders image placeholders entirely in browser. </p> <p>the lastest version is 1.65kb, <strong>less then 0.84kb</strong> after gzip.</p> <p>Placeholders can have custom colors, fonts, resizing behavior.</p> <a href="https://github.com/hustcc/placeholder.js/releases" id="download" target="_blank">Download placeholder.js</a> </div> <div class="block" id="details"> <h2><strong>Client</strong> Placeholder</h2> <p> <code> npm install placeholder.js </code> </p> <p> <code> require("placeholder.js"); </code> </p> <p> <code> placeholder.getData(opts); </code> </p> <p> <code> <img class="placeholder" /> </code> </p> <p> Learn more at the <a target="_blank" href="https://github.com/hustcc/placeholder.js">placeholder.js GitHub</a>. </p> <p> How to use? <a href="doc/">Documents</a> / <a href="doc/demo.html">DEMO</a>. </p> </div> <div class="block" id="server_holder"> <h2><strong>Server</strong> Placeholder</h2> <p> <code>placeholder.cn/{px}/{bg}/{fg}</code> </p> <p> Just put your image size after our URL and you'll get a placeholder. </p> <p> <code>1.<a target="_blank" href="http://placeholder.cn/128">placeholder.cn/128</a></code> <code>2.<a target="_blank" href="http://placeholder.cn/256x128">placeholder.cn/256x128</a></code> <code>3.<a target="_blank" href="http://placeholder.cn/128/aaa">placeholder.cn/137/aaa</a></code> <code>4.<a target="_blank" href="http://placeholder.cn/256x128/255/6e9">placeholder.cn/256x128/255/6e9</a></code> </p> </div> </div> </div> <div id="background" > </div> <!--[if lt IE 9]> <h2 class="ie">You're using an unsupported browser. <a href="http://goo.gl/OxmUO">Upgrade to IE9.</a></h2> <![endif]--> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="dist/placeholder.min.js"></script> <script type="text/javascript"> (function() { function a(a, b, c) { return "#" + ((256 + a << 8 | b) << 8 | c).toString(16).slice(1) } function b(a, b, c) { return [a[0] * (1 - c) + b[0] * c, a[1] * (1 - c) + b[1] * c, a[2] * (1 - c) + b[2] * c] }!~navigator.platform.indexOf("Linux") || $("body").addClass("etc"); var c = 120, d = 200, e, f, g = [ [198, 247, 159], [129, 209, 142], [210, 238, 252], [26, 155, 126] ]; var opts = { size: '128x128', bgcolor: '', color: '', fsize: 20, }; var screen_height = Math.max(window.devicePixelRatio * screen.height, window.innerHeight); var screen_width = Math.max(840, window.devicePixelRatio * screen.width); for (var h = 0, i = 0; i < screen_height; h++, i += e + 2) { e = c, h == 1 ? e = 234 : h > 1 && (e = Math.floor(e * .7 + Math.random() * e * .4)); for (var j = 0, k = 0; k < screen_width; j++, k += f + 2) { f = d + Math.random() * 20 - Math.random() * 20, f = Math.floor(f * .8 + Math.random() * f * .5); var l = Math.min(1, (j + 1) / (screen_width / f)), m = Math.min(1, (h + 1) / (screen_height / e)), n = b(g[0], g[2], m), o = b(g[1], g[3], m), p = b(n, o, l); p[0] = Math.round(p[0]), p[1] = Math.round(p[1]), p[2] = Math.round(p[2]); if (h != 1) { var q = a(p[0], p[1], p[2]), r = b(p, [0, 0, 0], .2), s = a(r[0], r[1], r[2]); opts.size = f + "x" + e; opts.bgcolor = q; opts.color = s; var t = $('<img />').attr('src', placeholder.getData(opts)).css({ top: i + "px", left: k + "px" }); $("#background").append(t) } } } })() </script> <span style="display:none"><script src="http://s4.cnzz.com/stat.php?id=1257060683&web_id=1257060683" language="JavaScript"></script></span></body></html>