以下是 css图片编号排序特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css图片编号排序</title>
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
</head>
<body>
<div class="container">
<div class="main clearfix">
<article class="article">
<h2>Cupcakes are yummy!</h2>
<figure class="figure figure-right">
<img src="images/1.jpg" />
<figcaption>A lovely strawberry-chocolate cupcake</figcaption>
</figure>
<p>Danish sweet croissant. Marzipan sugar plum brownie faworki marzipan candy canes. Icing carrot cake cheesecake croissant macaroon chocolate cake. Muffin wafer sugar plum oat cake wypas. Lollipop brownie wypas toffee sweet chupa chups. Biscuit soufflé jelly liquorice chocolate bar dragée danish dessert.</p>
<p>Bonbon powder donut sesame snaps liquorice. Brownie tootsie roll wypas sugar plum tootsie roll dragée caramels fruitcake jujubes. Jelly sweet roll cheesecake jelly beans gingerbread dragée caramels chupa chups croissant. Sesame snaps croissant liquorice bonbon chocolate cake chocolate bar jelly. Toffee wypas muffin cake topping dessert sweet. Cake caramels powder cake.</p>
<p>Biscuit marzipan bear claw candy ice cream fruitcake powder cake. Sugar plum bonbon jelly beans cupcake tart apple pie jelly beans. Gummies faworki candy oat cake biscuit bonbon cheesecake. Ice cream jelly ice cream cheesecake cupcake halvah gummi bears. Gummi bears brownie chocolate bar carrot cake. Chupa chups ice cream brownie tart ice cream. Jelly beans chocolate cake cotton candy brownie halvah toffee caramels sweet. Sesame snaps cotton candy donut faworki candy sweet. Bonbon icing danish toffee marzipan. Fruitcake carrot cake candy jelly beans. </p>
<figure class="figure">
<img src="images/2.jpg"/>
<figcaption>Hum... yummy! We want cupcakes!</figcaption>
</figure>
<p>Topping bear claw chocolate. Gummi bears cotton candy chupa chups faworki. Biscuit lollipop sugar plum danish cheesecake bear claw lollipop lemon drops dragée. Tootsie roll marzipan marshmallow cotton candy carrot cake jelly liquorice sweet muffin. Chocolate cake gingerbread biscuit chocolate bar brownie lemon drops. Powder chocolate donut donut.</p>
<h2>I bet you're hungry, right?</h2>
<p>Brownie lemon drops pudding bonbon applicake muffin gingerbread. Danish chocolate cake chocolate cake cotton candy. Muffin wafer danish bonbon sweet gummies toffee. Lollipop tart bear claw sweet roll pudding. Gummi bears cookie pie chupa chups gummi bears topping jujubes apple pie. Cheesecake brownie toffee.</p>
<p>Cotton candy sugar plum dessert liquorice chocolate cake jujubes tootsie roll tart ice cream. Pastry carrot cake jujubes fruitcake. Donut dessert candy canes lollipop pastry gummies toffee. Chocolate carrot cake carrot cake wypas pie marzipan apple pie chupa chups chupa chups. Liquorice chocolate bar biscuit wypas tart wafer liquorice soufflé. Bonbon candy canes candy pie. Liquorice gingerbread croissant.</p>
<p>Marzipan jelly-o chocolate cake gummi bears. Apple pie jelly-o sweet carrot cake wypas oat cake. Macaroon chocolate cake chocolate toffee gummies marzipan. Jelly beans liquorice croissant tootsie roll caramels apple pie. Carrot cake sesame snaps marshmallow.</p>
<figure class="figure figure-left">
<img src="images/3.jpg"/>
<figcaption>A yummy cupcake! Don't you want to have a bite?</figcaption>
</figure>
<p>Bear claw tiramisu halvah. Tootsie roll liquorice marzipan ice cream tart marshmallow liquorice tootsie roll caramels. Liquorice macaroon dessert ice cream. Topping dragée dragée cheesecake dessert gummi bears tart. Lemon drops jelly-o lollipop. Jelly-o jelly-o ice cream chupa chups croissant soufflé tootsie roll. </p>
<p>Lemon drops dragée marshmallow. Jelly-o cotton candy applicake chocolate bar sweet roll jelly faworki.</p>
<p>Caramels brownie dessert. Biscuit pie cheesecake applicake wypas marzipan. Lollipop sweet roll applicake macaroon fruitcake candy muffin. Powder chocolate bar chocolate applicake icing bonbon applicake macaroon jelly beans. Oat cake ice cream icing pudding caramels. Powder wypas pie ice cream brownie soufflé. Pudding halvah gummies candy canes lollipop dragée sweet gingerbread. Lollipop sesame snaps lemon drops.</p>
<h2>Jelly-o cotton candy applicake</h2>
<p> Jujubes dessert powder wypas sweet roll chupa chups gummi bears fruitcake. Liquorice soufflé gummi bears donut gingerbread brownie tiramisu lemon drops dragée. Jelly-o gummies cake brownie jujubes biscuit brownie. Dragée faworki gummies icing chupa chups donut cheesecake sweet roll. Cake sweet roll powder toffee pudding. Icing cookie halvah.</p>
<figure class="figure figure-right">
<img src="images/4.jpg"/>
<figcaption>Let's all eat cupcakes all the time</figcaption>
</figure>
<p>Brownie lemon drops pudding bonbon applicake muffin gingerbread. Danish chocolate cake chocolate cake cotton candy. Muffin wafer danish bonbon sweet gummies toffee. Lollipop tart bear claw sweet roll pudding. Gummi bears cookie pie chupa chups gummi bears topping jujubes apple pie. Cheesecake brownie toffee.</p>
<p>Cotton candy sugar plum dessert liquorice chocolate cake jujubes tootsie roll tart ice cream. Pastry carrot cake jujubes fruitcake. Donut dessert candy canes lollipop pastry gummies toffee. Chocolate carrot cake carrot cake wypas pie marzipan apple pie chupa chups chupa chups. Liquorice chocolate bar biscuit wypas tart wafer liquorice soufflé. Bonbon candy canes candy pie. Liquorice gingerbread croissant.</p>
<figure class="figure figure-left">
<img src="images/5.jpg"/>
<figcaption>Cupcakes, cupcakes, my darling</figcaption>
</figure>
<p>Danish sweet croissant. Marzipan sugar plum brownie faworki marzipan candy canes. Icing carrot cake cheesecake croissant macaroon chocolate cake. Muffin wafer sugar plum oat cake wypas. Lollipop brownie wypas toffee sweet chupa chups. Biscuit soufflé jelly liquorice chocolate bar dragée danish dessert.</p>
<p>Bonbon powder donut sesame snaps liquorice. Brownie tootsie roll wypas sugar plum tootsie roll dragée caramels fruitcake jujubes. Jelly sweet roll cheesecake jelly beans gingerbread dragée caramels chupa chups croissant. Sesame snaps croissant liquorice bonbon chocolate cake chocolate bar jelly. Toffee wypas muffin cake topping dessert sweet. Cake caramels powder cake.</p>
<p>Biscuit marzipan bear claw candy ice cream fruitcake powder cake. Sugar plum bonbon jelly beans cupcake tart apple pie jelly beans. Lemon drops dragée marshmallow. Jelly-o cotton candy applicake chocolate bar sweet roll jelly faworki. Caramels brownie dessert. Biscuit pie cheesecake applicake wypas marzipan. Lollipop sweet roll applicake macaroon fruitcake candy muffin. Powder chocolate bar chocolate applicake icing bonbon applicake macaroon jelly beans. Oat cake ice cream icing pudding caramels. Powder wypas pie ice cream brownie soufflé. Pudding halvah gummies candy canes lollipop dragée sweet gingerbread. Lollipop sesame snaps lemon drops.</p>
</article>
</div>
</div><!-- /container -->
</body>
</html>
JS代码(modernizr.custom.js):
/* Modernizr 2.6.2 (Custom Build) | MIT & BSD * Build:http://modernizr.com/download/#-touch-shiv-cssclasses-teststyles-prefixes-load */
;
window.Modernizr=function(a,b,c){
function w(a){
j.cssText=a}
function x(a,b){
return w(m.join(a+";
")+(b||""))}
function y(a,b){
return typeof a===b}
function z(a,b){
return!!~(""+a).indexOf(b)}
function A(a,b,d){
for(var e in a){
var f=b[a[e]];
if(f!==c)return d===!1?a[e]:y(f,"function")?f.bind(d||b):f}
return!1}
var d="2.6.2",e={
}
,f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={
}
.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n={
}
,o={
}
,p={
}
,q=[],r=q.slice,s,t=function(a,c,d,e){
var f,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");
if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);
return f=["­
",'<style id="s',h,'">',a,"</style>"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i}
,u={
}
.hasOwnProperty,v;
!y(u,"undefined")&&!y(u.call,"undefined")?v=function(a,b){
return u.call(a,b)}
:v=function(a,b){
return b in a&&y(a.constructor.prototype[b],"undefined")}
,Function.prototype.bind||(Function.prototype.bind=function(b){
var c=this;
if(typeof c!="function")throw new TypeError;
var d=r.call(arguments,1),e=function(){
if(this instanceof e){
var a=function(){
}
;
a.prototype=c.prototype;
var f=new a,g=c.apply(f,d.concat(r.call(arguments)));
return Object(g)===g?g:f}
return c.apply(b,d.concat(r.call(arguments)))}
;
return e}
),n.touch=function(){
var c;
return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:t(["@media (",m.join("touch-enabled),("),h,")","{
#modernizr{
top:9px;
position:absolute}
}
"].join(""),function(a){
c=a.offsetTop===9}
),c}
;
for(var B in n)v(n,B)&&(s=B.toLowerCase(),e[s]=n[B](),q.push((e[s]?"":"no-")+s));
return e.addTest=function(a,b){
if(typeof a=="object")for(var d in a)v(a,d)&&e.addTest(d,a[d]);
else{
a=a.toLowerCase();
if(e[a]!==c)return e;
b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}
return e}
,w(""),i=k=null,function(a,b){
function k(a,b){
var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;
return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}
function l(){
var a=r.elements;
return typeof a=="string"?a.split(" "):a}
function m(a){
var b=i[a[g]];
return b||(b={
}
,h++,a[g]=h,i[h]=b),b}
function n(a,c,f){
c||(c=b);
if(j)return c.createElement(a);
f||(f=m(c));
var g;
return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}
function o(a,c){
a||(a=b);
if(j)return a.createDocumentFragment();
c=c||m(a);
var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;
for(;
e<g;
e++)d.createElement(f[e]);
return d}
function p(a,b){
b.cache||(b.cache={
}
,b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){
return r.shivMethods?n(c,a,b):b.createElem(c)}
,a.createDocumentFragment=Function("h,f","return function(){
var n=f.cloneNode(),c=n.createElement;
h.shivMethods&&("+l().join().replace(/\w+/g,function(a){
return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'}
)+");
return n}
")(r,b.frag)}
function q(a){
a||(a=b);
var c=m(a);
return r.shivCSS&&!f&&!c.hasCSS&&(c.hasCSS=!!k(a,"article,aside,figcaption,figure,footer,header,hgroup,nav,section{
display:block}
mark{
background:#FF0;
color:#000}
")),j||p(a,c),a}
var c=a.html5||{
}
,d=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,e=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,f,g="_html5shiv",h=0,i={
}
,j;
(function(){
try{
var a=b.createElement("a");
a.innerHTML="<xyz></xyz>",f="hidden"in a,j=a.childNodes.length==1||function(){
b.createElement("a");
var a=b.createDocumentFragment();
return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}
()}
catch(c){
f=!0,j=!0}
}
)();
var r={
elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o}
;
a.html5=r,q(b)}
(this,b),e._version=d,e._prefixes=m,e.testStyles=t,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+q.join(" "):""),e}
(this,this.document),function(a,b,c){
function d(a){
return"[object Function]"==o.call(a)}
function e(a){
return"string"==typeof a}
function f(){
}
function g(a){
return!a||"loaded"==a||"complete"==a||"uninitialized"==a}
function h(){
var a=p.shift();
q=1,a?a.t?m(function(){
("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)}
,0):(a(),h()):q=0}
function i(a,c,d,e,f,i,j){
function k(b){
if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){
"img"!=a&&m(function(){
t.removeChild(l)}
,50);
for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}
}
var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={
t:d,s:c,e:f,a:i,x:j}
;
1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){
k.call(this,r)}
,p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}
function j(a,b,c,d,f){
return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}
function k(){
var a=B;
return a.loader={
load:j,i:0}
,a}
var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={
}
.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){
return"[object Array]"==o.call(a)}
,x=[],y={
}
,z={
timeout:function(a,b){
return b.length&&(a.timeout=b[0]),a}
}
,A,B;
B=function(a){
function b(a){
var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={
url:c,origUrl:c,prefixes:a}
,e,f,g;
for(f=0;
f<d;
f++)g=a[f].split("="),(e=z[g.shift()])&&(c=e(c,g));
for(f=0;
f<b;
f++)c=x[f](c);
return c}
function g(a,e,f,g,h){
var i=b(a),j=i.autoCallback;
i.url.split(".").pop().split("?").shift(),i.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]),i.instead?i.instead(a,e,f,g,h):(y[i.url]?i.noexec=!0:y[i.url]=1,f.load(i.url,i.forceCSS||!i.forceJS&&"css"==i.url.split(".").pop().split("?").shift()?"c":c,i.noexec,i.attrs,i.timeout),(d(e)||d(j))&&f.load(function(){
k(),e&&e(i.origUrl,h,g),j&&j(i.origUrl,h,g),y[i.url]=2}
)))}
function h(a,b){
function c(a,c){
if(a){
if(e(a))c||(j=function(){
var a=[].slice.call(arguments);
k.apply(this,a),l()}
),g(a,j,b,0,h);
else if(Object(a)===a)for(n in m=function(){
var b=0,c;
for(c in a)a.hasOwnProperty(c)&&b++;
return b}
(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){
var a=[].slice.call(arguments);
k.apply(this,a),l()}
:j[n]=function(a){
return function(){
var b=[].slice.call(arguments);
a&&a.apply(this,b),l()}
}
(k[n])),g(a[n],j,b,n,h))}
else!c&&l()}
var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;
c(h?a.yep:a.nope,!!i),i&&c(i)}
var i,j,l=this.yepnope.loader;
if(e(a))g(a,0,l,0);
else if(w(a))for(i=0;
i<a.length;
i++)j=a[i],e(j)?g(j,0,l,0):w(j)?B(j):Object(j)===j&&h(j,l);
else Object(a)===a&&h(a,l)}
,B.addPrefix=function(a,b){
z[a]=b}
,B.addFilter=function(a){
x.push(a)}
,B.errorTimeout=1e4,null==b.readyState&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",A=function(){
b.removeEventListener("DOMContentLoaded",A,0),b.readyState="complete"}
,0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){
var k=b.createElement("script"),l,o,e=e||B.errorTimeout;
k.src=a;
for(o in d)k.setAttribute(o,d[o]);
c=j?h:c||f,k.onreadystatechange=k.onload=function(){
!l&&g(k.readyState)&&(l=1,c(),k.onload=k.onreadystatechange=null)}
,m(function(){
l||(l=1,c(1))}
,e),i?k.onload():n.parentNode.insertBefore(k,n)}
,a.yepnope.injectCss=function(a,c,d,e,g,i){
var e=b.createElement("link"),j,c=i?h:c||f;
e.href=a,e.rel="stylesheet",e.type="text/css";
for(j in d)e.setAttribute(j,d[j]);
g||(n.parentNode.insertBefore(e,n),m(c,0))}
}
(this,document),Modernizr.load=function(){
yepnope.apply(window,[].slice.call(arguments,0))}
;
CSS代码(component.css):
.article{width:100%;max-width:50em;margin:0 auto;padding:1em;counter-reset:figures;}
.article h2{margin:1em 0;font-size:2em;border-bottom:3px solid #f5bca8;padding-bottom:.3em;color:#f5bca8;}
.article p{margin-bottom:1em;font-size:1.1em;line-height:1.6;text-align:justify;}
.article h2 + p,.article h2 + figure + p{text-indent:1em;}
.article p:first-of-type:first-line{font-weight:700;}
.figure{padding:0.9em;border:3px solid #f5bca8;background:#fff;margin:0 auto 1em;}
.figure img{margin:0 auto;display:block;max-width:100%;}
.figure figcaption{font-weight:700;text-transform:uppercase;letter-spacing:2px;font-size:0.8em;padding:.5em;text-align:center;color:#fff;background:#f5bca8;counter-increment:figures;}
.figure figcaption:before{content:'Fig. ' counter(figures) ' - ';}
.figure-left{float:left;margin:0 1.5em .5em 0;width:-webkit-min-content;width:-moz-min-content;width:min-content;}
.figure-right{float:right;margin:0 0 .5em 1.5em;width:-webkit-min-content;width:-moz-min-content;width:min-content;}
.figure-right img,.figure-left img{max-width:300px;}
@media (max-width:767px){.figure-left,.figure-right{float:none;margin:0 0 1em 0;width:100%;}
.figure img{max-width:100%;}
}
分享到QQ
分享到微博
微信扫一扫
