码迷,mamicode.com
首页 > 其他好文 > 详细

lightbox 图片浏览特效

时间:2014-08-23 11:08:40      阅读:287      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   java   os   io   for   ar   

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript" src="public/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="public/lightbox.css">
<script type="text/javascript" src="public/lightbox.js"></script>
<script type="text/javascript">
    $(function () {
        $(#pics img).lightBox({
            imageLoading    : public/lightbox-ico-loading.gif,
            imageBtnPrev    : public/lightbox-btn-prev.gif,
            imageBtnNext    : public/lightbox-btn-next.gif,
            imageBtnClose    : public/lightbox-btn-close.gif,
            imageBlank        : public/lightbox-blank.gif
        });
    });
</script>
</head>
<body>

<!-- img 的 href 和 src 指向同一张图片 -->
<div id="pics"> <dl> <dt> <img href="public/20130420145819_5222.jpg" alt="" src="public/20130420145819_5222.jpg"> </dt> <dd>dsafd</dd> </dl> <dl> <dt> <img href="public/20130420145813_4128.jpg" alt="" src="public/20130420145813_4128.jpg"> </dt> <dd>dsafd</dd> </dl> <dl> <dt><img href="public/20130420145816_1316.jpg" alt="" src="public/20130420145816_1316.jpg"></dt> <dd>dsafd</dd> </dl> <img href="public/20130420145822_3347.jpg" alt="" src="public/20130420145822_3347.jpg"> <img href="public/20130420145825_8816.jpg" alt="" src="public/20130420145825_8816.jpg"> <img href="public/20130420145829_2097.jpg" alt="" src="public/20130420145829_2097.jpg"> <img href="public/20130420145832_1003.jpg" alt="" src="public/20130420145832_1003.jpg"> <img href="public/20130420145835_2566.jpg" alt="" src="public/20130420145835_2566.jpg"> <img href="public/20130420145838_2566.jpg" alt="" src="public/20130420145838_2566.jpg"> </div> </body> </html>

 

 

 

 /** lightbox.css **/

1
#jquery-overlay { 2 Z-INDEX: 90; POSITION: absolute; WIDTH: 100%; HEIGHT: 500px; TOP: 0px; LEFT: 0px 3 } 4 #jquery-lightbox { 5 Z-INDEX: 100; POSITION: absolute; TEXT-ALIGN: center; LINE-HEIGHT: 0; WIDTH: 100%; TOP: 0px; LEFT: 0px 6 } 7 #jquery-lightbox A IMG { 8 BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-TOP: medium none; BORDER-RIGHT: medium none 9 } 10 #lightbox-container-image-box { 11 POSITION: relative; BACKGROUND-COLOR: #fff; MARGIN: 0px auto; WIDTH: 250px; HEIGHT: 250px 12 } 13 #lightbox-container-image { 14 PADDING-BOTTOM: 10px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; PADDING-TOP: 10px 15 } 16 #lightbox-loading { 17 POSITION: absolute; TEXT-ALIGN: center; LINE-HEIGHT: 0; WIDTH: 100%; HEIGHT: 25%; TOP: 40%; LEFT: 0% 18 } 19 #lightbox-nav { 20 Z-INDEX: 10; POSITION: absolute; WIDTH: 100%; HEIGHT: 100%; TOP: 0px; LEFT: 0px 21 } 22 #lightbox-container-image-box > #lightbox-nav { 23 LEFT: 0px 24 } 25 #lightbox-nav A { 26 OUTLINE-STYLE: none; OUTLINE-COLOR: invert; OUTLINE-WIDTH: medium 27 } 28 #lightbox-nav-btnPrev { 29 WIDTH: 49%; ZOOM: 1; DISPLAY: block; HEIGHT: 100% 30 } 31 #lightbox-nav-btnNext { 32 WIDTH: 49%; ZOOM: 1; DISPLAY: block; HEIGHT: 100% 33 } 34 #lightbox-nav-btnPrev { 35 FLOAT: left; LEFT: 0px 36 } 37 #lightbox-nav-btnNext { 38 FLOAT: right; RIGHT: 0px 39 } 40 #lightbox-container-image-data-box { 41 PADDING-BOTTOM: 0px; BACKGROUND-COLOR: #fff; MARGIN: 0px auto; PADDING-LEFT: 10px; WIDTH: 100%; PADDING-RIGHT: 10px; FONT: 10px/1.4em Verdana, Helvetica, sans-serif; OVERFLOW: auto; PADDING-TOP: 0px 42 } 43 #lightbox-container-image-data { 44 PADDING-BOTTOM: 0px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; COLOR: #666; PADDING-TOP: 0px 45 } 46 #lightbox-container-image-data #lightbox-image-details { 47 TEXT-ALIGN: left; WIDTH: 70%; FLOAT: left 48 } 49 #lightbox-image-details-caption { 50 FONT-WEIGHT: bold 51 } 52 #lightbox-image-details-currentNumber { 53 PADDING-BOTTOM: 1em; DISPLAY: block; CLEAR: left 54 } 55 #lightbox-secNav-btnClose { 56 PADDING-BOTTOM: 0.7em; WIDTH: 66px; FLOAT: right 57 }

/**  lightbox.js  **/
/*
* * jQuery lightBox plugin * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/) * and adapted to me for use like a plugin from jQuery. * @name jquery-lightbox-0.5.js * @author Leandro Vieira Pinho - http://leandrovieira.com * @version 0.5 * @date April 11, 2008 * @category jQuery plugin * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com) * @license CC Attribution-No Derivative Works 2.5 Brazil - http://creativecommons.org/licenses/by-nd/2.5/br/deed.en_US * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin */ eval(function(p,a,c,k,e,r){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--)r[e(c)]=k[c]||e(c);k=[function(e){return r[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}(‘(6($){$.2N.3g=6(4){4=23.2H({2B:\‘#34\‘,2g:0.8,1d:F,1M:\‘18/5-33-Y.16\‘,1v:\‘18/5-1u-2Q.16\‘,1E:\‘18/5-1u-2L.16\‘,1W:\‘18/5-1u-2I.16\‘,19:\‘18/5-2F.16\‘,1f:10,2A:3d,2s:\‘1j\‘,2o:\‘32\‘,2j:\‘c\‘,2f:\‘p\‘,2d:\‘n\‘,h:[],9:0},4);f I=N;6 20(){1X(N,I);u F}6 1X(1e,I){$(\‘1U, 1S, 1R\‘).l({\‘1Q\‘:\‘2E\‘});1O();4.h.B=0;4.9=0;7(I.B==1){4.h.1J(v 1m(1e.17(\‘J\‘),1e.17(\‘2v\‘)))}j{36(f i=0;i<I.B;i++){4.h.1J(v 1m(I[i].17(\‘J\‘),I[i].17(\‘2v\‘)))}}2n(4.h[4.9][0]!=1e.17(\‘J\‘)){4.9++}D()}6 1O(){$(\‘m\‘).31(\‘<e g="q-13"></e><e g="q-5"><e g="5-s-b-w"><e g="5-s-b"><1w g="5-b"><e 2V="" g="5-k"><a J="#" g="5-k-V"></a><a J="#" g="5-k-X"></a></e><e g="5-Y"><a J="#" g="5-Y-29"><1w W="\‘+4.1M+\‘"></a></e></e></e><e g="5-s-b-T-w"><e g="5-s-b-T"><e g="5-b-A"><1i g="5-b-A-1t"></1i><1i g="5-b-A-1g"></1i></e><e g="5-1s"><a J="#" g="5-1s-22"><1w W="\‘+4.1W+\‘"></a></e></e></e></e>\‘);f z=1D();$(\‘#q-13\‘).l({2K:4.2B,2J:4.2g,S:z[0],P:z[1]}).1V();f R=1p();$(\‘#q-5\‘).l({1T:R[1]+(z[3]/10),1c:R[0]}).E();$(\‘#q-13,#q-5\‘).C(6(){1a()});$(\‘#5-Y-29,#5-1s-22\‘).C(6(){1a();u F});$(G).2G(6(){f z=1D();$(\‘#q-13\‘).l({S:z[0],P:z[1]});f R=1p();$(\‘#q-5\‘).l({1T:R[1]+(z[3]/10),1c:R[0]})})}6 D(){$(\‘#5-Y\‘).E();7(4.1d){$(\‘#5-b,#5-s-b-T-w,#5-b-A-1g\‘).1b()}j{$(\‘#5-b,#5-k,#5-k-V,#5-k-X,#5-s-b-T-w,#5-b-A-1g\‘).1b()}f Q=v 1j();Q.1P=6(){$(\‘#5-b\‘).2D(\‘W\‘,4.h[4.9][0]);1N(Q.S,Q.P);Q.1P=6(){}};Q.W=4.h[4.9][0]};6 1N(1o,1r){f 1L=$(\‘#5-s-b-w\‘).S();f 1K=$(\‘#5-s-b-w\‘).P();f 1n=(1o+(4.1f*2));f 1y=(1r+(4.1f*2));f 1I=1L-1n;f 2z=1K-1y;$(\‘#5-s-b-w\‘).3f({S:1n,P:1y},4.2A,6(){2y()});7((1I==0)&&(2z==0)){7($.3e.3c){1H(3b)}j{1H(3a)}}$(\‘#5-s-b-T-w\‘).l({S:1o});$(\‘#5-k-V,#5-k-X\‘).l({P:1r+(4.1f*2)})};6 2y(){$(\‘#5-Y\‘).1b();$(\‘#5-b\‘).1V(6(){2u();2t()});2r()};6 2u(){$(\‘#5-s-b-T-w\‘).38(\‘35\‘);$(\‘#5-b-A-1t\‘).1b();7(4.h[4.9][1]){$(\‘#5-b-A-1t\‘).2p(4.h[4.9][1]).E()}7(4.h.B>1){$(\‘#5-b-A-1g\‘).2p(4.2s+\‘ \‘+(4.9+1)+\‘ \‘+4.2o+\‘ \‘+4.h.B).E()}}6 2t(){$(\‘#5-k\‘).E();$(\‘#5-k-V,#5-k-X\‘).l({\‘K\‘:\‘1C M(\‘+4.19+\‘) L-O\‘});7(4.9!=0){7(4.1d){$(\‘#5-k-V\‘).l({\‘K\‘:\‘M(\‘+4.1v+\‘) 1c 15% L-O\‘}).11().1k(\‘C\‘,6(){4.9=4.9-1;D();u F})}j{$(\‘#5-k-V\‘).11().2m(6(){$(N).l({\‘K\‘:\‘M(\‘+4.1v+\‘) 1c 15% L-O\‘})},6(){$(N).l({\‘K\‘:\‘1C M(\‘+4.19+\‘) L-O\‘})}).E().1k(\‘C\‘,6(){4.9=4.9-1;D();u F})}}7(4.9!=(4.h.B-1)){7(4.1d){$(\‘#5-k-X\‘).l({\‘K\‘:\‘M(\‘+4.1E+\‘) 2l 15% L-O\‘}).11().1k(\‘C\‘,6(){4.9=4.9+1;D();u F})}j{$(\‘#5-k-X\‘).11().2m(6(){$(N).l({\‘K\‘:\‘M(\‘+4.1E+\‘) 2l 15% L-O\‘})},6(){$(N).l({\‘K\‘:\‘1C M(\‘+4.19+\‘) L-O\‘})}).E().1k(\‘C\‘,6(){4.9=4.9+1;D();u F})}}2k()}6 2k(){$(d).30(6(12){2i(12)})}6 1G(){$(d).11()}6 2i(12){7(12==2h){U=2Z.2e;1x=27}j{U=12.2e;1x=12.2Y}14=2X.2W(U).2U();7((14==4.2j)||(14==\‘x\‘)||(U==1x)){1a()}7((14==4.2f)||(U==37)){7(4.9!=0){4.9=4.9-1;D();1G()}}7((14==4.2d)||(U==39)){7(4.9!=(4.h.B-1)){4.9=4.9+1;D();1G()}}}6 2r(){7((4.h.B-1)>4.9){2c=v 1j();2c.W=4.h[4.9+1][0]}7(4.9>0){2b=v 1j();2b.W=4.h[4.9-1][0]}}6 1a(){$(\‘#q-5\‘).2a();$(\‘#q-13\‘).2T(6(){$(\‘#q-13\‘).2a()});$(\‘1U, 1S, 1R\‘).l({\‘1Q\‘:\‘2S\‘})}6 1D(){f o,r;7(G.1h&&G.28){o=G.26+G.2R;r=G.1h+G.28}j 7(d.m.25>d.m.24){o=d.m.2P;r=d.m.25}j{o=d.m.2O;r=d.m.24}f y,H;7(Z.1h){7(d.t.1l){y=d.t.1l}j{y=Z.26}H=Z.1h}j 7(d.t&&d.t.1A){y=d.t.1l;H=d.t.1A}j 7(d.m){y=d.m.1l;H=d.m.1A}7(r<H){1z=H}j{1z=r}7(o<y){1B=o}j{1B=y}21=v 1m(1B,1z,y,H);u 21};6 1p(){f o,r;7(Z.1Z){r=Z.1Z;o=Z.2M}j 7(d.t&&d.t.1F){r=d.t.1F;o=d.t.1Y}j 7(d.m){r=d.m.1F;o=d.m.1Y}2q=v 1m(o,r);u 2q};6 1H(2C){f 2x=v 2w();1q=2h;3h{f 1q=v 2w()}2n(1q-2x<2C)};u N.11(\‘C\‘).C(20)}})(23);‘,62,204,‘||||settings|lightbox|function|if||activeImage||image||document|div|var|id|imageArray||else|nav|css|body||xScroll||jquery|yScroll|container|documentElement|return|new|box||windowWidth|arrPageSizes|details|length|click|_set_image_to_view|show|false|window|windowHeight|jQueryMatchedObj|href|background|no|url|this|repeat|height|objImagePreloader|arrPageScroll|width|data|keycode|btnPrev|src|btnNext|loading|self||unbind|objEvent|overlay|key||gif|getAttribute|theme/images|imageBlank|_finish|hide|left|fixedNavigation|objClicked|containerBorderSize|currentNumber|innerHeight|span|Image|bind|clientWidth|Array|intWidth|intImageWidth|___getPageScroll|curDate|intImageHeight|secNav|caption|btn|imageBtnPrev|img|escapeKey|intHeight|pageHeight|clientHeight|pageWidth|transparent|___getPageSize|imageBtnNext|scrollTop|_disable_keyboard_navigation|___pause|intDiffW|push|intCurrentHeight|intCurrentWidth|imageLoading|_resize_container_image_box|_set_interface|onload|visibility|select|object|top|embed|fadeIn|imageBtnClose|_start|scrollLeft|pageYOffset|_initialize|arrayPageSize|btnClose|jQuery|offsetHeight|scrollHeight|innerWidth||scrollMaxY|link|remove|objPrev|objNext|keyToNext|keyCode|keyToPrev|overlayOpacity|null|_keyboard_action|keyToClose|_enable_keyboard_navigation|right|hover|while|txtOf|html|arrayPageScroll|_preload_neighbor_images|txtImage|_set_navigation|_show_image_data|title|Date|date|_show_image|intDiffH|containerResizeSpeed|overlayBgColor|ms|attr|hidden|blank|resize|extend|close|opacity|backgroundColor|next|pageXOffset|fn|offsetWidth|scrollWidth|prev|scrollMaxX|visible|fadeOut|toLowerCase|style|fromCharCode|String|DOM_VK_ESCAPE|event|keydown|append|of|ico|000|fast|for||slideDown||100|250|msie|400|browser|animate|lightBox|do‘.split(‘|‘),0,{}))

所用到的图片

 

bubuko.com,布布扣

bubuko.com,布布扣

bubuko.com,布布扣

bubuko.com,布布扣

 

 

lightbox 图片浏览特效

标签:style   blog   http   color   java   os   io   for   ar   

原文地址:http://www.cnblogs.com/lxpursue/p/3930766.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!