jQuery全屏画廊灯箱特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery全屏画廊灯箱特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="gb2312"/>
	<title>jQuery全屏画廊灯箱效果</title>
	<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/bootstrap-responsive.css" rel="stylesheet" />
    <link href="css/fsgallery.css" rel="stylesheet" />
    
    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/fs_forse.js"></script>
</head>

<body style="padding-top: 50px;">    
    <div class="container">
        <h2>Example</h2>
        
        <ul class="thumbnails" id="gallery">
            <li class="span3">
                <a href="img/1.jpg">
                    <img src="img/1_mini.jpg" alt="" />
                </a>
            </li>
            <li class="span3">
                <a href="img/2.jpg">
                    <img src="img/2_mini.jpg" alt="" />
                </a>
            </li>
            <li class="span3">
                <a href="img/3.jpg">
                    <img src="img/3_mini.jpg" alt="" />
                </a>
            </li>
            <li class="span3">
                <a href="img/4.jpg">
                    <img src="img/4_mini.jpg" alt="" />
                </a>
            </li>
            
            <li class="span3">
                <a href="img/5.jpg">
                    <img src="img/5_mini.jpg" alt="" />
                </a>
            </li>
            <li class="span3">
                <a href="img/6.jpg">
                    <img src="img/6_mini.jpg" alt="" />
                </a>
            </li>
            <li class="span3">
                <a href="img/7.jpg">
                    <img src="img/7_mini.jpg" alt="" />
                </a>
            </li>
            <li class="span3">
                <a href="img/8.jpg">
                    <img src="img/8_mini.jpg" alt="" />
                </a>
            </li>
        </ul>
    </div>
</body>
</html>

JS代码(fs_forse.js):

eval(function(p,a,c,k,e,d){
	e=function(c){
	return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))}
;
	if(!''.replace(/^/,String)){
	while(c--){
	d[e(c)]=k[c]||e(c)}
k=[function(e){
	return d[e]}
];
	e=function(){
	return'\\w+'}
;
	c=1}
;
	while(c--){
	if(k[c]){
	p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}
}
return p}
('(7(d,m,g){
	7 t(a,c,d,b){
	J(a>d||c>b){
	8 f=a/d,e=c/b;
	f>e?(a=d,c/=f):(a/=e,c=b)}
9{
	y:a,x:c}
}
7 p(a,c){
	8 d=["-1D-","-1K-","-o-","-Y-",""],b={
}
,f,e=d.B;
	H(f=0;
	f<e;
	f++)b[d[f]+a]=c;
	9 b}
7 u(a){
	9 1f?p("1M","2w("+a+"2x,0)"):{
	2y:a}
}
8 h=0,v=7(a,c,d){
	7 b(b,a){
	H(8 c P b)J(g[b[c]]!==d)9"2v"==a?b[c]:!0;
	9!1}
7 f(a,c,f){
	8 e=a.2u(0).2q()+a.2r(1),g=(a+" "+m.1J(e+" ")+e).1B(" ");
	J("2s"===I c||"15"===I c)c=b(g,c);
	2t a:{
	g=(a+" "+l.1J(e+" ")+e).1B(" "),a=g;
	H(8 n P a)J(e=c[a[n]],e!==d){
	c=!1===f?a[n]:"7"===I e?e.1l(f||c):e;
	23 a}
c=!1}
9 c}
a={
}
;
	8 e=c.1w("2A"),g=e.2H,m=["2I","2J","O","Y"],l=["1D","1K","o","Y"],e={
}
,n=[],r=n.2F,q,h={
}
.2B,k;
	"15"===I h||"15"===I h.T?k=7(b,a){
	9 a P b&&"15"===I b.1F.M[a]}
:k=7(b,a){
	9 h.T(b,a)}
;
	1u.M.1l||(1u.M.1l=7(b){
	8 a=6;
	J("7"!=I a)2p 1h 2D;
	8 c=r.T(1j,1),d=7(){
	J(6 2E d){
	8 l=7(){
}
;
	l.M=a.M;
	8 l=1h l,e=a.1s(l,c.1v(r.T(1j)));
	9 2K(e)===e?e:l}
9 a.1s(b,c.1v(r.T(1j)))}
;
	9 d}
);
	e.1r=7(){
	8 b=c.1w("1r");
	9!!b.1p&&!!b.1p("2d")}
;
	e.1G=7(){
	9!!f("1M")}
;
	e.1I=7(){
	9 f("1S")}
;
	H(8 s P e)k(e,s)&&(q=s.1L(),a[q]=e[s](),n.1n((a[q]?"":"26-")+q));
	g.28="";
	9 e=29,a.2m="2.5.3",a.2l=l,a.2i=m,a.2j=7(a){
	9 b([a])}
,a.2c=f,a}
(6,6.20);
	1f=v.1G&&v.1I;
	1c="2n"P m;
	Z=2a.2o.1L().2h(/(2k|2g|2L|2b|2e|2C 2U|3c|3d|3e|3b\\.3a|34|35|36)/);
	8 k=7(a,c){
	6.e=d(a);
	6.o=d.38({
}
,d.1g.1m.1Z,c);
	6.i=0;
	6.w=g.16||d(g).16();
	6.h=g.13||d(g).13();
	6.1z();
	6.1H();
	6.1C();
	6.1y()}
;
	k.M={
	1F:k,1z:7(){
	8 a=6;
	a.j=[];
	a.e.11("a").B?a.e.11("a").1A(7(){
	a.j.1n({
	K:6.1t,N:d(6).19("10")[0].N}
)}
):a.e.1A(7(){
	a.j.1n({
	K:6.K,N:6.N}
)}
)}
,1H:7(){
	d("1W").R(6.Q=d(\'<z D="32">\').S().R(Z?"":6.1o=d(\'<z D="33">\'),Z?"":6.1q=d(\'<z D="2R">\'),6.22=d(\'<z D="2S">\'),6.A=d(\'<z D="2Q">\'),d(\'<z D="2T">\').R(6.30=d(\'<z D="2Y">\'))))}
,1C:7(){
	8 a,c=6.j.B;
	H(a=0;
	a<c;
	a++)6.A.R(d(\'<z D="25">\').L({
	y:6.w,x:6.h}
))}
,1U:7(a,c){
	d("<10>",{
	K:6.j[a].K,N:6.j[a].N}
).2V("2W",7(){
	c(a,d(6))}
)}
,1y:7(){
	7 a(a){
	a.1a();
	f=(a.X||a.1E[0].X)-b.C;
	1c?b.A[0].18("1e",c,!1).18("1x",h,!1):d(m).17(c).1N(h)}
7 c(a){
	a.1a();
	e=!0;
	b.C=(a.X||a.1E[0].X)-f;
	2X(k);
	b.F(b.C,0);
	b.C- -(b.i*b.w)>b.w/4&&(b.E(-1),d(6).1d("17 1e"));
	b.C- -(b.i*b.w)<-b.w/4&&(b.E(1),d(6).1d("17 1e"))}
7 h(a){
	e||b.E(1);
	b.C- -(b.i*b.w)>-b.w/4&&b.F(-b.i*b.w,p);
	d(6).1d("17 1N 1x");
	e=!1}
8 b=6,f=0,e=!1,k,p=b.o.12;
	b.C=0;
	1c?b.A[0].18("2N",a,!1):d(b.A).2M("10","2P",a);
	Z||(b.1o.V(7(){
	b.E(-1)}
),b.1q.V(7(){
	b.E(1)}
));
	d(g).3f(7(){
	b.w=g.16||d(g).16();
	b.h=g.13||d(g).13();
	8 a=b.j[b.i],a=t(a.y,a.x,b.w,b.h);
	b.A.19("z").L({
	y:b.w,x:b.h}
).19("10").L({
	y:a.y,x:a.x,1Y:-a.y/2,1X:-a.x/2}
);
	b.F(-b.i*b.w,0)}
);
	(b.e.11("a").B?b.e.11("a"):b.e).V(7(a){
	a.1a();
	a=b;
	8 c;
	a:{
	8 d=6.K||6.1t;
	H(c P b.j)J(b.j[c].K==d){
	c=2f(c);
	23 a}
c=3g 0}
a.i=c;
	b.1i();
	b.F(-b.i*b.w,0);
	b.1V()}
);
	b.22.V(7(){
	b.S()}
);
	b.Q.V(7(a){
	d(a.3k).3j("25")&&b.S()}
);
	d(m).3h(7(a){
	27==a.1b?b.S():37==a.1b&&b.Q.21(":1Q")?b.E(-1):39==a.1b&&b.Q.21(":1Q")&&b.E(1)}
)}
,1i:7(){
	8 a=6.j.B-1,c;
	H(c=6.i-6.o.G;
	c<=6.i+6.o.G;
	c++)0>c?6.o.U&&6.G(a+c+1):c>a?6.o.U&&6.G(c-a):6.G(c)}
,G:7(a){
	8 c=6,d=c.A.31("z").2Z(a);
	d.14().1T||(d.14({
	1T:!0}
),c.1U(a,7(a,f){
	W=t(f[0].y,f[0].x,c.w,c.h);
	c.j[a].y=f[0].y;
	c.j[a].x=f[0].x;
	d.R(f.L({
	y:W.y,x:W.x,1Y:-W.y/2,1X:-W.x/2}
).1O(c.o.1P))}
))}
,1V:7(){
	6.Q.1O(1k)}
,S:7(){
	6.Q.3i(1k)}
,F:7(a,c){
	1f?6.A.L(p("1S-12",c+"Y")).L(u(a)):6.A.F(u(a),c);
	6.C=a}
,24:7(a){
	0>a&&(a=6.o.U?6.j.B-1:0);
	a>6.j.B-1&&(a=6.o.U?0:6.j.B-1);
	9 a}
,E:7(a){
	6.i=6.24(6.i+a);
	6.F(-6.i*6.w,6.o.12);
	6.1i()}
}
;
	d.1g.1m=7(a){
	h++;
	8 c=d(m.1W);
	c.14("1R"+h)||c.14("1R"+h,1h k(6,a));
	9 6}
;
	d.1g.1m.1Z={
	12:1k,U:!1,G:2,1P:2G}
}
)(2z,20,2O);
	',62,207,'||||||this|function|var|return||||||||||images||||||||||||||height|width|div|shuft|length|pos|class|goTo|animate|preload|for|typeof|if|src|css|prototype|alt||in|gallery|append|hide|call|loop|click|size|pageX|ms|mobile|img|parent|duration|innerHeight|data|undefined|innerWidth|mousemove|addEventListener|find|preventDefault|keyCode|touch|unbind|touchmove|css3|fn|new|checkLoad|arguments|500|bind|fsgallery|push|prev|getContext|next|canvas|apply|href|Function|concat|createElement|touchend|events|createArray|each|split|createImages|webkit|targetTouches|constructor|csstransforms|createHtml|csstransitions|join|moz|toLowerCase|transform|mouseup|fadeIn|fadeTime|visible|fsgallery_|transition|loaded|loadImg|show|body|marginTop|marginLeft|defaults|document|is|close|break|getIndex|fs_gallery_shuft_item|no||cssText|null|navigator|ipad|testAllProps||iemobile|parseInt|iphone|match|_cssomPrefixes|testProp|android|_domPrefixes|_version|ontouchstart|userAgent|throw|toUpperCase|substr|string|else|charAt|pfx|translate|px|left|jQuery|modernizr|hasOwnProperty|windows|TypeError|instanceof|slice|1E3|style|Webkit|Moz|Object|ipod|delegate|touchstart|window|mousedown|fs_gallery_shuft|fs_gallery_next|fs_gallery_close|fs_gallery_thumbs|ce|on|load|clearInterval|fs_gallery_thumbs_list|eq|fs_thumbs_list|children|fs_gallery|fs_gallery_prev|symbian|nintendo|wii||extend||browser|up|netfront|playstation|midp|resize|void|keydown|fadeOut|hasClass|target'.split('|'),0,{
}
))$(document).ready(function(){
	$('#gallery img').fsgallery()}
)

CSS代码(fsgallery.css):

.fs_gallery{background:rgba(0,0,0,0.9);position:fixed;left:0;top:0;right:0;bottom:0;z-index:100;}
.fs_gallery_close{position:absolute;top:20px;right:20px;width:25px;height:25px;color:#ccc;font-size:34px;line-height:23px;text-align:center;cursor:pointer;z-index:102;}
.fs_gallery_close:before{content:"×";}
.fs_gallery_close:hover{color:#fff;}
.fs_gallery_prev,.fs_gallery_next{position:absolute;width:80px;color:#ccc;font-size:30px;cursor:pointer;z-index:101;}
.fs_gallery_prev:hover,.fs_gallery_next:hover{background:rgba(0,0,0,0.1);color:#fff;}
.fs_gallery_prev{left:0;top:0;bottom:0;}
.fs_gallery_next{right:0;top:0;bottom:0;}
.fs_gallery_prev:before{content:"‹";position:absolute;height:30px;margin-top:-30px;top:50%;left:35px;}
.fs_gallery_next:before{content:"›";position:absolute;height:30px;margin-top:-30px;top:50%;left:35px;}
.fs_gallery_shuft{position:relative;width:9999999px;}
.fs_gallery_shuft:after{clear:both;content:"";display:block;}
.fs_gallery_shuft_item{float:left;position:relative;background-image:url(data:image/gif;base64,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);background-position:center center;background-repeat:no-repeat;}
.fs_gallery_shuft_item img{box-shadow:0 0 8px rgba(0,0,0,0.8);position:absolute;top:50%;left:50%;}

附件:下载该文件资源,减少时间成本(增值服务)