jquery实现的图片展示特效代码

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

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

以下是 jquery实现的图片展示特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,图片特效,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为jquery实现的图片展示特效，属于站长常用代码" />
<title>jquery实现的图片展示特效</title>
<link rel=stylesheet type=text/css href="css/style.css">
<link rel=stylesheet type=text/css href="css/spacegallery.css">
<script type=text/javascript src="js/jquery-1-3-2.js"></script>
<script type=text/javascript src="js/eye.js"></script>
<script type=text/javascript src="js/spacegallery.js"></script>
<script type=text/javascript src="js/xixi.js"></script>
</head>
<body>
<div id=main>
<div id=container>
<div id=sub_col>
<div class=un>
<H2>Uniwersytet Ekonomiczny (SJO)<small><a class=external 
href="http://dotlabs.pl/#">premiera wrzesień 2009</a></small></H2>
<P>Pierwszy w Polsce system zarz?dzania Studium J?zyków Obcych.</P>
<P>Przygotowali?my aplikacj? wspomagaj?c? prace Studium na Uniwersytecie 
Ekonomicznym w Krakowie.</P>
<P>Aplikacja zintegrowana jest z uczelniani? baz? danych.</P></div>
<DIV class=ar>
<H2>ARGE Paliwa Sp. z o.o. <small><a class=external 
href="http://www.arge.pl/">http://www.arge.pl/</a></small></H2>
<P>Na zlecenie ARGE Paliwa Sp. z o.o. przygotowali?my audyt funkcjonalno?ci 
obecnej strony internetowej oraz zaprojektowali?my architektur? informacji nowej 
strony.</P></DIV>
<DIV class=dt>
<H2>Dziennik Teatralny <small><a class=external 
href="http://www.teatry.art.pl/">http://www.teatry.art.pl/</a></small></H2>
<P>Najwi?kszy w Polsce internetowy wortal teatralny. Istniej?cy od ponad 10 lat 
- tysi?ce artyku?ów, recenzji oraz portretów artystów.</P>
<P>Wortal korzysta z naszego oprogramowania do zarz?dzania tre?ci? stworzonego 
specjalnie na jego potrzeby.</P></DIV>
<DIV class=kh>
<H2>Kurs homiletyczny <small><a class=external 
href="http://www.kurshomiletyczny.pl/">http://www.kurshomiletyczny.pl/</a></small></H2>
<P>Pierwsza w Polsce platforma e-learningowa dla ksi??y dzi?ki, której mog? oni 
uczestniczy? w cyklicznie odbywaj?cych si? kursach homiletycznych.</P>
<P>Dotlabs.pl odpowiada za ca?o?? oprogramowania.</P></DIV>
<DIV class=re>
<H2>Rejestrator.net <small><a class=external 
href="http://www.kurshomiletyczny.pl/">http://www.kurshomiletyczny.pl/</a></small></H2>
<P>Najwi?kszy na Dolnym ?l?sku rejestrator domen oraz dostawca serwerów.</P>
<P>W projekcie tym odpowiadali?my za now? architektur? informacji oraz 
oprogramowanie systemu zamówień (m.in. generowanie faktur, p?atno?ci 
online)</P></DIV>
<DIV class=ss>
<H2>Sun System Energy <small><a class=external 
href="http://www.sunsenergy.pl/">http://www.sunsenergy.pl/</a></small></H2>
<P>Dla Sun Sysetm Energy - firmy zajmuj?cej si? systemy pozyskiwania energii 
wdro?li?my nasz autorski CMS dzi?ki któremy mo?liwa.</P></DIV>
<DIV class=fm>
<H2>Fizjo-med <small><a class=external 
href="http://www.fizjomed.com.pl/">http://www.fizjomed.com.pl/</a></small></H2>
<P>Przychodnia Fizjo-med posiadaj?cy pod swoj? opiek? m.in. pi?karzy mistrza 
Polski Wis?y Kraków powierzy? na przygotowanie swojego nowego serwisu.</P>
<P>Przygotowali?my interaktywn? w?drówk? po gabinecie oraz.</P></DIV>
<DIV class=bg>
<H2>Beautiful Garden <small><a class=external 
href="http://www.beautifulgarden.pl/">http://www.beautifulgarden.pl/</a></small></H2>
<P>Firma ogrodnicza Beautiful Garden zwróci?a si? do nas z pro?b? o 
przygotowanie nowego wizerunku w sieci.</P>
<P>Strona zarz?dzana przez nasz autorski CMS oraz rozbudowany modu? galerii 
zdj?? sta?y si? nieodzownym narz?dziem wspomagaj?cym dzialano?? firmy.</P></DIV>
<DIV class=va>
<H2>Valant <small><a class=external 
href="http://www.valant.pl/">http://www.valant.pl/</a></small></H2>
<P>Kolejna ze stron korzystaj?ca z mo?liwo?ci naszego autorskiego 
CMSa</P></DIV></div>
<div id=main_col>
<div id=gallery class=spacegallery><img class=va alt=Valant 
src="images/valant.gif"> <img class=bg alt="Beautiful Garden" 
src="images/garden.gif"> <img class=fm alt=Fizjo-med 
src="images/fizjomed.gif"> <img class=ss alt="Sun System Energy" 
src="images/sunsenergy.gif"> <img class=re alt=Rejestrator.net 
src="images/rejestrator.gif"> <img class=kh alt="Kurs homiletyczny" 
src="images/kurs.gif"> <img class=dt alt="Dziennik Teatralny" 
src="images/teatry.gif"> <img class=ar alt="Stacje Paliw Arge" 
src="images/arge.gif"> <img class=un alt="Uniwersytet Ekonomiczny" 
src="images/uniwersytet.gif"> </div></div></div>
</div>
</body>
</html>

JS代码(xixi.js):

$(document).ready(function(){
	$('#gallery').spacegallery({
	loadingClass:'loading',perspective:100}
);
	x = $('#gallery img:last').attr("class");
	$('#sub_col div.'+x).show();
	$('#gallery a').click(function(){
	$('#sub_col div').hide();
	x = $(this).prev('img').prev('img').attr("class");
	$('#sub_col div.'+x).fadeIn();
}
);
	$(".external").click(function(){
	window.open( $(this).attr('href') );
	return false;
}
)}
);

CSS代码(spacegallery.css):

.spacegallery{POSITION:relative;OVERFLOW:hidden}
.spacegallery IMG{POSITION:absolute;RIGHT:0px}
.spacegallery A{Z-INDEX:1000;POSITION:absolute;WIDTH:100%;DISPLAY:block;BACKGROUND:url(images/blank.gif);HEIGHT:100%;TOP:0px;LEFT:0px}

CSS代码(style.css):

*{PADDING-BOTTOM:0px;BORDER-RIGHT-WIDTH:0px;MARGIN:0px;PADDING-LEFT:0px;PADDING-RIGHT:0px;BORDER-TOP-WIDTH:0px;BORDER-BOTTOM-WIDTH:0px;BORDER-LEFT-WIDTH:0px;PADDING-TOP:0px}
A{COLOR:#272727;FONT-WEIGHT:bold;TEXT-DECORATION:none}
A:hover{TEXT-DECORATION:underline}
IMG{BORDER-BOTTOM-STYLE:none;BORDER-RIGHT-STYLE:none;BORDER-TOP-STYLE:none;BORDER-LEFT-STYLE:none}
FIELDSET{BORDER-BOTTOM-STYLE:none;BORDER-RIGHT-STYLE:none;BORDER-TOP-STYLE:none;BORDER-LEFT-STYLE:none}
UL{LIST-STYLE-TYPE:none}
H1{FONT-SIZE:1.3em;FONT-WEIGHT:bold}
H2{FONT-SIZE:1.3em;FONT-WEIGHT:bold}
H3{FONT-SIZE:1.3em;FONT-WEIGHT:bold}
H4{FONT-SIZE:1.3em;FONT-WEIGHT:bold}
H5{FONT-SIZE:1.3em;FONT-WEIGHT:bold}
H6{FONT-SIZE:1.3em;FONT-WEIGHT:bold}
BODY{PADDING-BOTTOM:0px;PADDING-LEFT:0px;PADDING-RIGHT:0px;FONT-FAMILY:Tahoma,Verdana,sans-serif;BACKGROUND:url(../images/bg.jpg) #fff no-repeat -16px 0px;COLOR:#272727;FONT-SIZE:x-small;PADDING-TOP:0px}
#wrapper{PADDING-BOTTOM:0px;PADDING-LEFT:48px;WIDTH:957px;PADDING-RIGHT:0px;BACKGROUND:none transparent scroll repeat 0% 0%;FLOAT:left;FONT-SIZE:110%;OVERFLOW:hidden;PADDING-TOP:20px}
#wrapper P{PADDING-BOTTOM:10px;PADDING-LEFT:0px;PADDING-RIGHT:0px;PADDING-TOP:0px}
#wrapper IMG{MARGIN:0px 10px 10px 0px;FLOAT:left}
#wrapper STRONG{FONT-SIZE:1em;FONT-WEIGHT:bold}
#wrapper SMALL{FONT-STYLE:normal;FONT-SIZE:1em;FONT-WEIGHT:normal}
#wrapper EM{FONT-STYLE:italic;FONT-SIZE:1em}
#sidebar{LINE-HEIGHT:1.5em;MARGIN:0px 85px 0px 0px;WIDTH:182px;FLOAT:left;FONT-SIZE:108%}
#sidebar A{FONT-WEIGHT:normal}
#sidebar A:hover{BORDER-BOTTOM:#f05392 1px solid;COLOR:#14acac;TEXT-DECORATION:none}
#sidebar H1{PADDING-BOTTOM:30px;PADDING-LEFT:0px;PADDING-RIGHT:0px;DISPLAY:block;HEIGHT:122px;PADDING-TOP:0px}
#sidebar H1 A{WIDTH:111px;DISPLAY:block;BACKGROUND:url(../img/logo.jpg) no-repeat 0px 0px;HEIGHT:122px}
#sidebar H1 A:hover{BORDER-BOTTOM-STYLE:none;BORDER-RIGHT-STYLE:none;BORDER-TOP-STYLE:none;BORDER-LEFT-STYLE:none}
#sidebar H1 A SPAN{DISPLAY:none}
#sidebar H2{PADDING-BOTTOM:10px;LINE-HEIGHT:16px;PADDING-LEFT:0px;PADDING-RIGHT:0px;FONT-FAMILY:Arial,Tahoma,sans-serif;FONT-SIZE:135%;FONT-WEIGHT:bold;PADDING-TOP:0px}
#sidebar H2 SPAN{DISPLAY:none}
#sidebar H2.head_co_robimy{BACKGROUND:url(../img/h_co_robimy.gif) no-repeat 0px 0px;HEIGHT:16px}
#sidebar H2.head_dolacz_do_nas{BACKGROUND:url(../img/h_dolacz_do_nas.gif) no-repeat 0px 0px;HEIGHT:16px}
#sidebar UL{PADDING-BOTTOM:10px;PADDING-LEFT:0px;PADDING-RIGHT:0px;PADDING-TOP:0px}
#sidebar UL LI{PADDING-BOTTOM:7px;PADDING-LEFT:13px;PADDING-RIGHT:0px;ZOOM:1;BACKGROUND:url(../img/bullet11.gif) no-repeat 0px 6px;OVERFLOW:hidden;PADDING-TOP:0px}
#sidebar UL LI.item1{BACKGROUND-IMAGE:url(../img/bullet11.gif)}
#sidebar UL LI.item2{BACKGROUND-IMAGE:url(../img/bullet12.gif)}
#sidebar UL LI.item3{BACKGROUND-IMAGE:url(../img/bullet13.gif)}
#sidebar UL LI.item4{BACKGROUND-IMAGE:url(../img/bullet14.gif)}
#sidebar UL.cross_list LI{BACKGROUND:url(../img/bullet21.gif) no-repeat 0px 4px}
#sidebar UL.cross_list LI.item1{BACKGROUND-IMAGE:url(../img/bullet21.gif)}
#sidebar UL.cross_list LI.item2{BACKGROUND-IMAGE:url(../img/bullet22.gif)}
#sidebar UL.cross_list LI.item3{BACKGROUND-IMAGE:url(../img/bullet23.gif)}
#main{MARGIN:15px 330px 0px;WIDTH:690px;FLOAT:left;COLOR:#9ba5a5}
#container{PADDING-BOTTOM:64px;LINE-HEIGHT:1.7em;PADDING-LEFT:0px;WIDTH:690px;PADDING-RIGHT:0px;FLOAT:left;HEIGHT:335px;OVERFLOW:hidden;PADDING-TOP:0px}
UL#navi{MARGIN:0px 0px 15px;WIDTH:690px;FLOAT:left;CLEAR:both}
UL#navi LI.prev{PADDING-BOTTOM:0px;PADDING-LEFT:50px;PADDING-RIGHT:0px;FLOAT:left;PADDING-TOP:9px}
UL#navi LI.prev A{WIDTH:31px;DISPLAY:block;BACKGROUND:url(../img/prev_arrow.gif) no-repeat 0px 0px;HEIGHT:30px}
UL#navi LI.next{PADDING-BOTTOM:0px;PADDING-LEFT:9px;PADDING-RIGHT:0px;FLOAT:left;PADDING-TOP:20px}
UL#navi LI.next A{WIDTH:31px;DISPLAY:block;BACKGROUND:url(../img/next_arrow.gif) no-repeat 0px 0px;HEIGHT:30px}
UL#navi LI A SPAN{DISPLAY:none}
DIV.info_box{PADDING-BOTTOM:0px;LINE-HEIGHT:1.5em;PADDING-LEFT:0px;WIDTH:196px;PADDING-RIGHT:20px;FLOAT:left;FONT-SIZE:105%;PADDING-TOP:0px}
#wrapper DIV.info_box P{PADDING-TOP:30px}
#wrapper DIV.info_box IMG{MARGIN:0px 5px 0px 0px}
DIV.first.info_box{PADDING-BOTTOM:0px;PADDING-LEFT:12px;WIDTH:225px;PADDING-RIGHT:35px;PADDING-TOP:0px}
DIV.last.info_box{PADDING-BOTTOM:0px;PADDING-LEFT:0px;PADDING-RIGHT:0px;PADDING-TOP:0px}
#wrapper DIV.last.info_box P{PADDING-TOP:22px}
#wrapper DIV.first.info_box P{PADDING-TOP:22px}
#wrapper DIV.first.info_box A{COLOR:#f05392}
#wrapper DIV.info_box A:hover{BORDER-BOTTOM:#f05392 1px solid;TEXT-DECORATION:none}
#wrapper DIV.first.info_box A:hover{BORDER-BOTTOM:#ade02c 1px solid}
#sub_col{MARGIN:45px 10px 0px 0px;WIDTH:240px;FLOAT:left;OVERFLOW:hidden}
#sub_col H2{PADDING-BOTTOM:10px;LINE-HEIGHT:1em;PADDING-LEFT:0px;PADDING-RIGHT:0px;LETTER-SPACING:2px;COLOR:#272727;FONT-SIZE:24px;FONT-WEIGHT:normal;PADDING-TOP:0px}
#sub_col H2 SMALL{PADDING-BOTTOM:0px;PADDING-LEFT:0px;PADDING-RIGHT:0px;DISPLAY:block;LETTER-SPACING:0px;FONT-SIZE:12px;PADDING-TOP:5px}
#sub_col H2 SMALL A{COLOR:#46c8c8;FONT-WEIGHT:normal}
#sub_col DIV{DISPLAY:none}
#sub_col A:hover{BORDER-BOTTOM:#f05392 1px solid;TEXT-DECORATION:none}
#main_col{PADDING-BOTTOM:0px;PADDING-LEFT:0px;WIDTH:420px;PADDING-RIGHT:0px;FLOAT:right;OVERFLOW:hidden;PADDING-TOP:0px}
#gallery{WIDTH:100%;HEIGHT:330px}
.left{FLOAT:left}
.right{FLOAT:right}
IMG.left{MARGIN:0px 0px 10px 10px;FLOAT:left !important}
IMG.right{MARGIN:0px 10px 10px 0px;FLOAT:right !important}
IMG.center{MARGIN:0px auto 10px;DISPLAY:block;FLOAT:none !important}
DIV.center{MARGIN:0px auto;DISPLAY:block;FLOAT:none !important}
DIV.center IMG{MARGIN:0px}
.aright{TEXT-ALIGN:right}
.acenter{TEXT-ALIGN:center}
DIV.hr_line{LINE-HEIGHT:0;MARGIN:0px auto;DISPLAY:block;BACKGROUND:url(../img/dott.gif) repeat-x -1px -1px;HEIGHT:20px;CLEAR:both;FONT-SIZE:0px}

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