以下是 jQuery画廊插件least.js特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<title>jQuery画廊插件least.js</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/style.min.css?12122013" rel="stylesheet" />
<link href="css/least.min.css" rel="stylesheet" />
<link href="css/prism.min.css" rel="stylesheet" />
</head>
<body>
<!-- Gallery -->
<section>
<ul id="gallery">
<li id="fullPreview"></li>
<!-- 1 -->
<li>
<a href="img/full/1.jpg"></a>
<img data-original="img/thumb/1.jpg" src="img/effects/white.gif" width="240" height="150" alt="Photo" />
<div class="overLayer"></div>
<div class="infoLayer">
<ul>
<li>
<h2>
Photo
</h2>
</li>
<li>
<p>
View Picture
</p>
</li>
</ul>
</div>
<div class="projectInfo">
<strong>Day, Month, Year:</strong> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</div>
</li>
<!-- 2 -->
<li>
<a href="img/full/2.jpg"></a>
<img data-original="img/thumb/2.jpg" src="img/effects/white.gif" width="240" height="150" alt="Photo" />
<div class="overLayer"></div>
<div class="infoLayer">
<ul>
<li>
<h2>
Photo
</h2>
</li>
<li>
<p>
View Picture
</p>
</li>
</ul>
</div>
<p class="projectInfo">
<strong>Day, Month, Year:</strong> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</p>
</li>
<!-- 3 -->
<li>
<a href="img/full/3.jpg"></a>
<img data-original="img/thumb/3.jpg" src="img/effects/white.gif" width="240" height="150" alt="Photo" />
<div class="overLayer"></div>
<div class="infoLayer">
<ul>
<li>
<h2>
Photo
</h2>
</li>
<li>
<p>
View Picture
</p>
</li>
</ul>
</div>
<p class="projectInfo">
<strong>Day, Month, Year:</strong> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</p>
</li>
<!-- 4 -->
<li>
<a href="img/full/4.jpg"></a>
<img data-original="img/thumb/4.jpg" src="img/effects/white.gif" width="240" height="150" alt="Photo" />
<div class="overLayer"></div>
<div class="infoLayer">
<ul>
<li>
<h2>
Photo
</h2>
</li>
<li>
<p>
View Picture
</p>
</li>
</ul>
</div>
<p class="projectInfo">
<strong>Day, Month, Year:</strong> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</p>
</li>
<!-- 5 -->
<li>
<a href="img/full/5.jpg"></a>
<img data-original="img/thumb/5.jpg" src="img/effects/white.gif" width="240" height="150" alt="Photo" />
<div class="overLayer"></div>
<div class="infoLayer">
<ul>
<li>
<h2>
Photo
</h2>
</li>
<li>
<p>
View Picture
</p>
</li>
</ul>
</div>
<p class="projectInfo">
<strong>Day, Month, Year:</strong> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</p>
</li>
<!-- 6 -->
<li>
<a href="img/full/6.jpg"></a>
<img data-original="img/thumb/6.jpg" src="img/effects/white.gif" width="240" height="150" alt="Photo" />
<div class="overLayer"></div>
<div class="infoLayer">
<ul>
<li>
<h2>
Photo
</h2>
</li>
<li>
<p>
View Picture
</p>
</li>
</ul>
</div>
<p class="projectInfo">
<strong>Day, Month, Year:</strong> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</p>
</li>
<!-- 7 -->
<li>
<a href="img/full/7.jpg"></a>
<img data-original="img/thumb/7.jpg" src="img/effects/white.gif" width="240" height="150" alt="Photo" />
<div class="overLayer"></div>
<div class="infoLayer">
<ul>
<li>
<h2>
Photo
</h2>
</li>
<li>
<p>
View Picture
</p>
</li>
</ul>
</div>
<p class="projectInfo">
<strong>Day, Month, Year:</strong> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</p>
</li>
<!-- 8 -->
<li>
<a href="img/full/8.jpg"></a>
<img data-original="img/thumb/8.jpg" src="img/effects/white.gif" width="240" height="150" alt="Photo" />
<div class="overLayer"></div>
<div class="infoLayer">
<ul>
<li>
<h2>
Photo
</h2>
</li>
<li>
<p>
View Picture
</p>
</li>
</ul>
</div>
<p class="projectInfo">
<strong>Day, Month, Year:</strong> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</p>
</li>
<!-- 9 -->
<li>
<a href="img/full/9.jpg"></a>
<img data-original="img/thumb/9.jpg" src="img/effects/white.gif" width="240" height="150" alt="Photo" />
<div class="overLayer"></div>
<div class="infoLayer">
<ul>
<li>
<h2>
Photo
</h2>
</li>
<li>
<p>
View Picture
</p>
</li>
</ul>
</div>
<p class="projectInfo">
<strong>Day, Month, Year:</strong> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</p>
</li>
<!-- 10 -->
<li>
<a href="img/full/10.jpg"></a>
<img data-original="img/thumb/10.jpg" src="img/effects/white.gif" width="240" height="150" alt="Photo" />
<div class="overLayer"></div>
<div class="infoLayer">
<ul>
<li>
<h2>
Photo
</h2>
</li>
<li>
<p>
View Picture
</p>
</li>
</ul>
</div>
<p class="projectInfo">
<strong>Day, Month, Year:</strong> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</p>
</li>
<!-- 11 -->
<li>
<a href="img/full/11.jpg"></a>
<img data-original="img/thumb/11.jpg" src="img/effects/white.gif" width="240" height="150" alt="Photo" />
<div class="overLayer"></div>
<div class="infoLayer">
<ul>
<li>
<h2>
Photo
</h2>
</li>
<li>
<p>
View Picture
</p>
</li>
</ul>
</div>
<p class="projectInfo">
<strong>Day, Month, Year:</strong> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</p>
</li>
<!-- 12 -->
<li>
<a href="img/full/12.jpg"></a>
<img data-original="img/thumb/12.jpg" src="img/effects/white.gif" width="240" height="150" alt="Photo" />
<div class="overLayer"></div>
<div class="infoLayer">
<ul>
<li>
<h2>
Photo
</h2>
</li>
<li>
<p>
View Picture
</p>
</li>
</ul>
</div>
<p class="projectInfo">
<strong>Day, Month, Year:</strong> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</p>
</li>
<!-- 13 -->
<li>
<a href="img/full/13.jpg"></a>
<img data-original="img/thumb/13.jpg" src="img/effects/white.gif" width="240" height="150" alt="Photo" />
<div class="overLayer"></div>
<div class="infoLayer">
<ul>
<li>
<h2>
Photo
</h2>
</li>
<li>
<p>
View Picture
</p>
</li>
</ul>
</div>
<p class="projectInfo">
<strong>Day, Month, Year:</strong> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</p>
</li>
<!-- 14 -->
<li>
<a href="img/full/14.jpg"></a>
<img data-original="img/thumb/14.jpg" src="img/effects/white.gif" width="240" height="150" alt="Photo" />
<div class="overLayer"></div>
<div class="infoLayer">
<ul>
<li>
<h2>
Photo
</h2>
</li>
<li>
<p>
View Picture
</p>
</li>
</ul>
</div>
<p class="projectInfo">
<strong>Day, Month, Year:</strong> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</p>
</li>
<!-- 15 -->
<li>
<a href="img/full/15.jpg"></a>
<img data-original="img/thumb/15.jpg" src="img/effects/white.gif" width="240" height="150" alt="Photo" />
<div class="overLayer"></div>
<div class="infoLayer">
<ul>
<li>
<h2>
Photo
</h2>
</li>
<li>
<p>
View Picture
</p>
</li>
</ul>
</div>
<p class="projectInfo">
<strong>Day, Month, Year:</strong> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</p>
</li>
<!-- 16 -->
<li>
<a href="img/full/16.jpg"></a>
<img data-original="img/thumb/16.jpg" src="img/effects/white.gif" width="240" height="150" alt="Photo" />
<div class="overLayer"></div>
<div class="infoLayer">
<ul>
<li>
<h2>
Photo
</h2>
</li>
<li>
<p>
View Picture
</p>
</li>
</ul>
</div>
<p class="projectInfo">
<strong>Day, Month, Year:</strong> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</p>
</li>
<!-- 17 -->
<li>
<a href="img/full/17.jpg"></a>
<img data-original="img/thumb/17.jpg" src="img/effects/white.gif" width="240" height="150" alt="Photo" />
<div class="overLayer"></div>
<div class="infoLayer">
<ul>
<li>
<h2>
Photo
</h2>
</li>
<li>
<p>
View Picture
</p>
</li>
</ul>
</div>
<p class="projectInfo">
<strong>Day, Month, Year:</strong> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</p>
</li>
<!-- 18 -->
<li>
<a href="img/full/18.jpg"></a>
<img data-original="img/thumb/18.jpg" src="img/effects/white.gif" width="240" height="150" alt="Photo" />
<div class="overLayer"></div>
<div class="infoLayer">
<ul>
<li>
<h2>
Photo
</h2>
</li>
<li>
<p>
View Picture
</p>
</li>
</ul>
</div>
<p class="projectInfo">
<strong>Day, Month, Year:</strong> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</p>
</li>
<!-- 19 -->
<li>
<a href="img/full/19.jpg"></a>
<img data-original="img/thumb/19.jpg" src="img/effects/white.gif" width="240" height="150" alt="Photo" />
<div class="overLayer"></div>
<div class="infoLayer">
<ul>
<li>
<h2>
Photo
</h2>
</li>
<li>
<p>
View Picture
</p>
</li>
</ul>
</div>
<p class="projectInfo">
<strong>Day, Month, Year:</strong> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</p>
</li>
<!-- 20 -->
<li>
<a href="img/full/20.jpg"></a>
<img data-original="img/thumb/20.jpg" src="img/effects/white.gif" width="240" height="150" alt="Photo" />
<div class="overLayer"></div>
<div class="infoLayer">
<ul>
<li>
<h2>
Photo
</h2>
</li>
<li>
<p>
View Picture
</p>
</li>
</ul>
</div>
<p class="projectInfo">
<strong>Day, Month, Year:</strong> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</p>
</li>
</ul>
</section>
<!-- / Gallery -->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.lazyload.min.js"></script>
<script src="js/least.min.js?03072013"></script>
<script src="js/prism.js"></script>
<script>
$(document).ready(function(){
$('#gallery').least();
});
</script>
</body>
</html>
JS代码(least.js):
/***** least.*** Author:Kamil Czujowski,Sergej Müller*** Transformed to a jQuery Plugin by Jorge Epuñan - @csslab*** Version:1.5*** Made with ♥ - Copyright (c) 2013 Hamburg,Germany - All rights reserved.*** https://twitter.com/kamilczujowski,http://wpcoder.de**/
(function($){
$.fn.least = function(options){
var settings = $.extend({
'random':true,'lazyload':true,'scrollToGallery':true}
,options);
return this.each(function(){
/* Open Images */
function intipreview(object,path,caption){
var close = $('<figure class="close"></figure>'),img = $('<img src="' + path + '"/>'),thumb = $('li a');
img.load(function(){
object.html('<div class="fullCaption">' + caption + '</div>').prepend(img).append(close).slideDown('slow');
thumb.removeClass('spinner');
}
);
close.on('click',function(){
$('#fullPreview').slideToggle('slow');
}
);
}
$(this).find('li a').click(function(e){
e.preventDefault();
var $$ = $(this),path = $$.attr('href'),preview = $('#fullPreview'),previewImg = preview.children('img'),caption = $$.nextAll('.projectInfo').html() || '';
/* Same Image */
if ( previewImg.length && path === previewImg.attr('src') ){
preview.slideToggle('slow');
return;
}
/* Other Image */
if ( previewImg.length ){
preview.slideUp('slow',function(){
intipreview(preview,path,caption);
}
);
/* First Image */
}
else{
intipreview(preview,path,caption);
}
/* Add spinner */
$(this).addClass('spinner');
}
);
if(settings.random){
/* Random Images - looked up from jquery forum */
$('#gallery').each(function(){
var ul = $(this),li = ul.children('li').not(':first-child');
li.sort(function(){
vartemp = parseInt( Math.random()*8,null ),OddEven = temp%4,PosNeg = temp>2 ? 1:-1;
return ( OddEven*PosNeg );
}
).appendTo(ul);
}
);
}
if( settings.lazyload && $.fn.lazyload ){
/* Effect's */
$("img").lazyload({
effect:"fadeIn"}
);
}
else{
$("img").each(function(){
$(this).attr('src',$(this).data('original'));
}
);
}
if(settings.scrollToGallery){
/* Scroll to Top */
$(this).find('li a').click(function(e){
e.preventDefault();
$('html,body').animate({
scrollTop:$('#gallery').offset().top}
,500);
}
);
}
}
);
}
;
}
)(jQuery);
JS代码(prism.js):
/** * Prism:Lightweight,robust,elegant syntax highlighting * MIT license http://www.opensource.org/licenses/mit-license.php/ * @author Lea Verou http://lea.verou.me */
(function(){
var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={
util:{
type:function(e){
return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]}
,clone:function(e){
var n=t.util.type(e);
switch(n){
case"Object":var r={
}
;
for(var i in e)e.hasOwnProperty(i)&&(r[i]=t.util.clone(e[i]));
return r;
case"Array":return e.slice()}
return e}
}
,languages:{
extend:function(e,n){
var r=t.util.clone(t.languages[e]);
for(var i in n)r[i]=n[i];
return r}
,insertBefore:function(e,n,r,i){
i=i||t.languages;
var s=i[e],o={
}
;
for(var u in s)if(s.hasOwnProperty(u)){
if(u==n)for(var a in r)r.hasOwnProperty(a)&&(o[a]=r[a]);
o[u]=s[u]}
return i[e]=o}
,DFS:function(e,n){
for(var r in e){
n.call(e,r,e[r]);
t.util.type(e)==="Object"&&t.languages.DFS(e[r],n)}
}
}
,highlightAll:function(e,n){
var r=document.querySelectorAll('code[class*="language-"],[class*="language-"] code,code[class*="lang-"],[class*="lang-"] code');
for(var i=0,s;
s=r[i++];
)t.highlightElement(s,e===!0,n)}
,highlightElement:function(r,i,s){
var o,u,a=r;
while(a&&!e.test(a.className))a=a.parentNode;
if(a){
o=(a.className.match(e)||[,""])[1];
u=t.languages[o]}
if(!u)return;
r.className=r.className.replace(e,"").replace(/\s+/g," ")+" language-"+o;
a=r.parentNode;
/pre/i.test(a.nodeName)&&(a.className=a.className.replace(e,"").replace(/\s+/g," ")+" language-"+o);
var f=r.textContent;
if(!f)return;
f=f.replace(/&/g,"&
").replace(/</g,"<
").replace(/>/g,">
").replace(/\u00a0/g," ");
var l={
element:r,language:o,grammar:u,code:f}
;
t.hooks.run("before-highlight",l);
if(i&&self.Worker){
var c=new Worker(t.filename);
c.onmessage=function(e){
l.highlightedCode=n.stringify(JSON.parse(e.data));
l.element.innerHTML=l.highlightedCode;
s&&s.call(l.element);
t.hooks.run("after-highlight",l)}
;
c.postMessage(JSON.stringify({
language:l.language,code:l.code}
))}
else{
l.highlightedCode=t.highlight(l.code,l.grammar);
l.element.innerHTML=l.highlightedCode;
s&&s.call(r);
t.hooks.run("after-highlight",l)}
}
,highlight:function(e,r){
return n.stringify(t.tokenize(e,r))}
,tokenize:function(e,n){
var r=t.Token,i=[e],s=n.rest;
if(s){
for(var o in s)n[o]=s[o];
delete n.rest}
e:for(var o in n){
if(!n.hasOwnProperty(o)||!n[o])continue;
var u=n[o],a=u.inside,f=!!u.lookbehind||0;
u=u.pattern||u;
for(var l=0;
l<i.length;
l++){
var c=i[l];
if(i.length>e.length)break e;
if(c instanceof r)continue;
u.lastIndex=0;
var h=u.exec(c);
if(h){
f&&(f=h[1].length);
var p=h.index-1+f,h=h[0].slice(f),d=h.length,v=p+d,m=c.slice(0,p+1),g=c.slice(v+1),y=[l,1];
m&&y.push(m);
var b=new r(o,a?t.tokenize(h,a):h);
y.push(b);
g&&y.push(g);
Array.prototype.splice.apply(i,y)}
}
}
return i}
,hooks:{
all:{
}
,add:function(e,n){
var r=t.hooks.all;
r[e]=r[e]||[];
r[e].push(n)}
,run:function(e,n){
var r=t.hooks.all[e];
if(!r||!r.length)return;
for(var i=0,s;
s=r[i++];
)s(n)}
}
}
,n=t.Token=function(e,t){
this.type=e;
this.content=t}
;
n.stringify=function(e){
if(typeof e=="string")return e;
if(Object.prototype.toString.call(e)=="[object Array]")return e.map(n.stringify).join("");
var r={
type:e.type,content:n.stringify(e.content),tag:"span",classes:["token",e.type],attributes:{
}
}
;
r.type=="comment"&&(r.attributes.spellcheck="true");
t.hooks.run("wrap",r);
var i="";
for(var s in r.attributes)i+=s+'="'+(r.attributes[s]||"")+'"';
return"<"+r.tag+' class="'+r.classes.join(" ")+'" '+i+">"+r.content+"</"+r.tag+">"}
;
if(!self.document){
self.addEventListener("message",function(e){
var n=JSON.parse(e.data),r=n.language,i=n.code;
self.postMessage(JSON.stringify(t.tokenize(i,t.languages[r])));
self.close()}
,!1);
return}
var r=document.getElementsByTagName("script");
r=r[r.length-1];
if(r){
t.filename=r.src;
document.addEventListener&&!r.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)}
}
)();
;
Prism.languages.markup={
comment:/<
!--[\w\W]*?--(>
|>
)/g,prolog:/<
\?.+?\?>
/,doctype:/<
!DOCTYPE.+?>
/,cdata:/<
!\[CDATA\[[\w\W]+?]]>
/i,tag:{
pattern:/<
\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|\w+))?\s*)*\/?>
/gi,inside:{
tag:{
pattern:/^<
\/?[\w:-]+/i,inside:{
punctuation:/^<
\/?/,namespace:/^[\w-]+?:/}
}
,"attr-value":{
pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,inside:{
punctuation:/=|>
|"/g}
}
,punctuation:/\/?>
/g,"attr-name":{
pattern:/[\w:-]+/g,inside:{
namespace:/^[\w-]+?:/}
}
}
}
,entity:/&
#?[\da-z]{
1,8}
;
/gi}
;
Prism.hooks.add("wrap",function(e){
e.type==="entity"&&(e.attributes.title=e.content.replace(/&
/,"&"))}
);
;
Prism.languages.css={
comment:/\/\*[\w\W]*?\*\//g,atrule:/@[\w-]+?(\s+[^;
{
]+)?(?=\s*{
|\s*;
)/gi,url:/url\((["']?).*?\1\)/gi,selector:/[^\{
\}
\s][^\{
\}
]*(?=\s*\{
)/g,property:/(\b|\B)[a-z-]+(?=\s*:)/ig,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,ignore:/&(lt|gt|amp);
/gi,punctuation:/[\{
\}
;
:]/g}
;
Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{
style:{
pattern:/(<
|<)style[\w\W]*?(>|>
)[\w\W]*?(<
|<)\/style(>|>
)/ig,inside:{
tag:{
pattern:/(<
|<)style[\w\W]*?(>|>
)|(<
|<)\/style(>|>
)/ig,inside:Prism.languages.markup.tag.inside}
,rest:Prism.languages.css}
}
}
);
;
Prism.languages.clike={
comment:{
pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|[^:]\/\/.*?(\r?\n|$))/g,lookbehind:!0}
,string:/("|')(\\?.)*?\1/g,keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|catch|finally|null|break|continue)\b/g,"boolean":/\b(true|false)\b/g,number:/\b-?(0x)?\d*\.?[\da-f]+\b/g,operator:/[-+]{
1,2}
|!|=?<
|=?>
|={
1,2}
|(&
){
1,2}
|\|?\||\?|\*|\//g,ignore:/&(lt|gt|amp);
/gi,punctuation:/[{
}
[\];
(),.:]/g}
;
;
Prism.languages.javascript=Prism.languages.extend("clike",{
keyword:/\b(var|let|if|else|while|do|for|return|in|instanceof|function|new|with|typeof|try|catch|finally|null|break|continue)\b/g,number:/\b(-?(0x)?\d*\.?[\da-f]+|NaN|-?Infinity)\b/g}
);
Prism.languages.insertBefore("javascript","keyword",{
regex:{
pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{
0,3}
(?=\s*($|[\r\n,.;
}
)]))/g,lookbehind:!0}
}
);
Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{
script:{
pattern:/(<
|<)script[\w\W]*?(>|>
)[\w\W]*?(<
|<)\/script(>|>
)/ig,inside:{
tag:{
pattern:/(<
|<)script[\w\W]*?(>|>
)|(<
|<)\/script(>|>
)/ig,inside:Prism.languages.markup.tag.inside}
,rest:Prism.languages.javascript}
}
}
);
;
CSS代码(prism.min.css):
code[class*="language-"],pre[class*="language-"]{color:black;text-shadow:0 1px white;font-size:12px;font-family:Consolas,Monaco,'Andale Mono',monospace;direction:ltr;text-align:left;white-space:pre-wrap;word-spacing:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}
@media print{code[class*="language-"],pre[class*="language-"]{text-shadow:none}
}
pre[class*="language-"]{padding:1em;margin:15px auto;overflow:auto;max-width:650px}
:not(pre)>code[class*="language-"],pre[class*="language-"]{background:#f5f2f0}
:not(pre)>code[class*="language-"]{padding:.1em;border-radius:.3em}
.token.comment,.token.prolog,.token.doctype,.token.cdata{color:slategray}
.token.punctuation{color:#999}
.namespace{opacity:.7}
.token.property,.token.tag,.token.boolean,.token.number{color:#905}
.token.selector,.token.attr-name,.token.string{color:#690}
.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string{color:#a67f59;background:rgba(255,255,255,0.5)}
.token.atrule,.token.attr-value,.token.keyword{color:#07a}
.token.regex,.token.important{color:#e90}
.token.important{font-weight:bold}
.token.entity{cursor:help}
CSS代码(style.min.css):
@charset "UTF-8";@import url(http://fonts.googleapis.com/css?family=Arvo);/***** least.*** Author:Kamil Czujowski,Sergej Müller*** Version:1.5*** Made with ♥ - Copyright (c) 2013 Hamburg,Germany - All rights reserved.*** https://twitter.com/kamilczujowski,http://wpcoder.de**/
/* @group SCSS */
/* FONT */
/* @end */
/* @group Mixins */
/* @end */
/* @group Colors */
/* @end */
/* @group Default */
*{border:0;margin:0;padding:0;outline:0;}
html{background-color:#fdfcfb;}
body{height:100%;min-height:100%;position:relative;margin:50px auto 20px auto;}
ul{list-style:none;}
a{color:#e94439;text-decoration:none;}
a:hover{color:#ee6f67;text-decoration:underline;}
h2{font-family:Arvo,Arial,sans-serif;font-size:30px;line-height:25px;font-weight:500;text-transform:uppercase;color:white;letter-spacing:1px;}
h1{font-family:Arvo,Arial,sans-serif;font-size:60px;line-height:75px;font-weight:800;color:#e94439;text-transform:lowercase;}
p{font-family:Georgia,Arial,sans-serif;font-size:15px;line-height:15px;font-weight:100;color:white;}
/* @group Placeholder */
::-webkit-input-placeholder{color:gray;}
::-moz-placeholder{color:gray;}
:-ms-input-placeholder{color:gray;}
input:-moz-placeholder{color:gray;}
/* @end */
/* @end */
/* @group Header */
header{min-width:100%;width:100%;text-align:center;min-height:150px;}
header p{font-family:Arvo,Arial,sans-serif;font-size:15px;line-height:25px;font-weight:400;color:#e94439;text-transform:uppercase;}
header figure{width:250px;background-color:#e94439;box-shadow:1px 1px 5px;position:absolute;right:-60px;top:0;overflow:hidden;padding:5px 0;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition:background-color 0.5s linear;-moz-transition:background-color 0.5s linear;-ms-transition:background-color 0.5s linear;-o-transition:background-color 0.5s linear;transition:background-color 0.5s linear;}
header figure a{font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:18px;font-weight:400;color:white;}
header figure a:hover{color:white;text-decoration:none;}
header figure:hover{background-color:fadeout(#e94439,25%);}
/* @end */
/* @group Article */
article{width:100%;min-width:100%;text-align:center;margin:0 0 30px 0;}
article:first-child{margin:0;}
article hr{max-width:674px;border-top:1px solid #ebe5e1;margin:30px auto 0 auto;}
article h2{font-family:Arvo,Arial,sans-serif;font-size:20px;line-height:25px;font-weight:400;color:#e94439;text-transform:uppercase;}
article h3{font-family:Arvo,Arial,sans-serif;font-size:15px;line-height:25px;font-weight:400;color:#e94439;text-transform:uppercase;margin:15px 0 0 0;}
article p{font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:18px;font-weight:300;color:black;display:inline-block;margin:15px 0 0;max-width:650px;}
article input[type=submit],article a#button{-webkit-appearance:none;background-color:#e94439;max-width:150px;color:white;display:block;margin:20px auto 0 auto;padding:15px 30px;border-radius:8px;font-family:Helvetica,Arial,sans-serif;font-size:20px;line-height:20px;font-weight:300;-webkit-transition:background-color 0.5s linear;-moz-transition:background-color 0.5s linear;-ms-transition:background-color 0.5s linear;-o-transition:background-color 0.5s linear;transition:background-color 0.5s linear;}
article input[type=submit]:hover,article a#button:hover{text-decoration:none;background-color:#ee6f67;}
article #adsense{display:block;margin:55px auto 0 auto;}
article #mc_embed_signup{max-width:650px;margin:40px auto 50px auto;}
article #mc_embed_signup label{font-family:Arvo,Arial,sans-serif;font-size:20px;line-height:25px;font-weight:400;color:#e94439;text-transform:uppercase;}
article #mc_embed_signup input{border:1px solid #f5f2f0;width:325px;padding:10px 5px;margin:10px 0;color:black;}
article #mc_embed_signup input[type=submit]{margin:10px auto;color:white;cursor:pointer;}
article strong{font-weight:600;}
article figure{max-width:960px;margin:25px auto 0 auto;}
article figure .gplus{margin-left:15px;display:inline-block;}
/* @end */
/* @group Footer */
footer{min-width:100%;width:100%;text-align:center;margin:50px 0 0 0;}
footer p{font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:22px;font-weight:300;color:black;display:block;}
footer span{display:inline-block;color:#e94439;font-size:20px;margin:0 3px;-webkit-transition:color 0.5s linear;-moz-transition:color 0.5s linear;-ms-transition:color 0.5s linear;-o-transition:color 0.5s linear;transition:color 0.5s linear;}
footer span:hover{color:#ee6f67;}
footer a{color:#e94439;}
footer a:hover{color:#ee6f67;text-decoration:underline;}
/* @end */
/* CSS Ribbon by Simon Whitaker */
.github-fork-ribbon{position:absolute;padding:2px 0;background-color:#e94439;/* Add a drop shadow */
-webkit-box-shadow:0px 2px 3px 0px rgba(0,0,0,0.5);box-shadow:0px 2px 3px 0px rgba(0,0,0,0.5);z-index:9999;pointer-events:auto;}
.github-fork-ribbon a,.github-fork-ribbon a:hover{font-family:Helvetica,Arial,sans-serif;font-size:13px;line-height:20px;font-weight:400;color:white;/* Set the text properties */
text-decoration:none;text-shadow:0 -1px rgba(0,0,0,0.5);text-align:center;/* Set the geometry. If you fiddle with these you'll also need to tweak the top and right values in #github-fork-ribbon. */
width:220px;display:inline-block;padding:2px 0;/* Add "stitching" effect */
border-width:1px 0;border-style:dotted;border-color:rgba(255,255,255,0.7);}
.github-fork-ribbon-wrapper{width:180px;height:165px;position:absolute;overflow:hidden;top:-50px;z-index:9999;pointer-events:none;}
.github-fork-ribbon-wrapper.fixed{position:fixed;}
.github-fork-ribbon-wrapper.right{right:0;}
.github-fork-ribbon-wrapper.right .github-fork-ribbon{top:50px;right:-43px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}
/* @end */
分享到QQ
分享到微博
微信扫一扫
