placeholder.js
/
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</title>    <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:520px}.block{float:left;width:200px;margin-right:40px}#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:16px;line-height:16px}.block code{border-radius:4px;font-size:12px;font-family:'Lucida Console',monospace;background:#eee;text-align:center;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">            <div class="block header">                <h1>placeholder.js</h1>                <p>                    placeholder.js renders image placeholders entirely in browser.                </p>                <p><code>size only 0.98kb.</code></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>Usage</h2>                <p>                    <code> placeholder.getData(opts); </code>                </p>                or                <p>                    <code> &lt;img class="placeholder" /&gt; </code>                </p>                <p>                    Learn more at the <a href="https://github.com/hustcc/placeholder.js">placeholder.js GitHub</a>.                </p>                <h2>How</h2>                <p>                    How to use? <a href="doc/">Documents</a> / <a href="doc/demo.html">DEMO</a>.                </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="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,        };        for (var h = 0, i = 0; i < screen.height; h++, i += e + 2) {            e = c, h == 1 ? e = 230 : 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></body></html>