以下是 jQuery手风琴式相册图片特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery手风琴式相册图片特效</title>
<link rel="stylesheet" href="css/accordiongallery.doc.css" type="text/css" />
<!--[if lt IE 9]><script src="js/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/accordiongallery.core.css" type="text/css" />
<link rel="stylesheet" href="css/accordiongallery.air.css" type="text/css" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.accordiongallery.min.js"></script>
<style>
#gallery {
width: 100%;
height: 500px;
}
</style>
<script>
$(document).ready(function() {
$('#gallery').accordionGallery();
});
</script>
</head>
<body>
<article id="home">
<header>
</header>
<article id="gallery">
<section>
<h1>Portfolio</h1>
<a href="images/autumn-large.jpg" title="An autumn ThemeForest theme">
<img src="images/autumn-thumb.jpg" width="125" height="90" />
<p>The Seasons, Autumn</p>
</a>
<a href="images/autumn-home-large.jpg" title="The Homepage">
<img src="images/autumn-home-thumb.jpg" width="125" height="90" />
<p>The Seasons, Autumn Homepage</p>
</a>
<a href="images/mustash-large.jpg" title="Online art market">
<img src="images/mustash-thumb.jpg" width="125" height="90" />
<p>Mustash.ro</p>
</a>
<a href="images/winter-large.jpg" title="Upcoming winter ThemeForest theme">
<img src="images/winter-thumb.jpg" width="125" height="90" />
<p>The Seasons, Winter</p>
</a>
<a href="images/winter-home-large.jpg" title="Theme homepage">
<img src="images/winter-home-thumb.jpg" width="125" height="90" />
<p>The Seasons, Winter Homepage</p>
</a>
<a href="images/bluebusiness-home-large.jpg" title="The Homepage for BlueBusiness">
<img src="images/bluebusiness-home-thumb.jpg" width="125" height="90" />
<p>BlueBusiness Homepage</p>
</a>
</section>
<section>
<h1>Products</h1>
<a href="images/bluebusiness-large.jpg" title="Classic business theme on ThemeForest">
<img src="images/bluebusiness-thumb.jpg" width="125" height="90" />
<p>BlueBusiness</p>
</a>
<a href="images/bluebusiness-home-large.jpg" title="The Homepage for BlueBusiness">
<img src="images/bluebusiness-home-thumb.jpg" width="125" height="90" />
<p>BlueBusiness Homepage</p>
</a>
</section>
<section>
<h1>Upcoming</h1>
<a href="images/winter-large.jpg" title="Upcoming winter ThemeForest theme">
<img src="images/winter-thumb.jpg" width="125" height="90" />
<p>The Seasons, Winter</p>
</a>
</section>
<section>
<h1>Projects</h1>
<a href="images/acorn-vp-large.jpg" title="HTML5 video player results from Dev.Opera article">
<img src="images/acorn-vp-thumb.jpg" width="125" height="90" />
<p>Acorn Video Player</p>
</a>
<a href="images/acorn-vp2-large.jpg" title="Acorn video player with a different child theme">
<img src="images/acorn-vp2-thumb.jpg" width="125" height="90" />
<p>Acorn Video Player, Smalldark Theme</p>
</a>
</section>
</article>
</article>
</body>
</html>
CSS代码(accordiongallery.air.css):
/*Air Themefor Accordion GalleryGhinda - Cristian Colceriuwww.ghinda.netv1.0 - 7:40 PM 11/8/2010*/
/* General */
.accordiongallery.air{overflow:hidden;padding:5px;font-family:Arial,Helvetica,'Bitstream Vera Sans',sans-serif;font-weight:bold;font-size:12px;}
/* Sections */
.accordiongallery.air section h1{margin:0 0 5px 0;padding-bottom:5px;border-bottom:1px solid #afafb9;cursor:default;font-size:13px;line-height:1em;}
.accordiongallery.air section{position:relative;width:150px;padding:10px;border:1px solid #fff;margin-right:5px;background-color:#f1f3f2;background-image:-moz-linear-gradient(top,#f1f3f2,#d0d0da);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#f1f3f2),color-stop(1,#d0d0da));-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow:0px 0px 4px #0c3d4c;-webkit-box-shadow:0px 0px 4px #0c3d4c;box-shadow:0px 0px 4px #0c3d4c;}
.accordiongallery.air section:hover{-moz-box-shadow:0px 0px 8px #000;-webkit-box-shadow:0px 0px 8px #000;box-shadow:0px 0px 8px #000;}
/* Vertical Thumbs */
.accordiongallery.air section .accordiongallery-thumbs a{display:block;overflow:hidden;padding:5px;margin:4px;color:#555;text-align:center;text-decoration:none;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-webkit-transition:all 500ms ease-in-out;-moz-transition:all 500ms ease-in-out;-o-transition:all 500ms ease-in-out;transition:all 500ms ease-in-out;}
.accordiongallery.air section .accordiongallery-thumbs a:hover,.accordiongallery.air section .accordiongallery-thumbs a:focus{background-color:#e7e7e7;-moz-box-shadow:0px 0px 4px #b2b2b2;-webkit-box-shadow:0px 0px 4px #b2b2b2;box-shadow:0px 0px 4px #b2b2b2;}
/* Vertical Scrollers */
.accordiongallery.air .accordiongallery-scrollup,.accordiongallery.air .accordiongallery-scrolldown{display:block;height:10px;cursor:default;text-indent:-9999px;background-repeat:no-repeat;background-position:top center;background-image:url(air-arrow-vertical.png);opacity:0.6;}
.accordiongallery.air .accordiongallery-scrollup:hover,.accordiongallery.air .accordiongallery-scrolldown:hover{opacity:1;}
.accordiongallery.air .accordiongallery-scrolldown{background-position:bottom center;}
.accordiongallery.air .active-section{background-color:#d0d0da;}
.accordiongallery.air .inactive-section a{opacity:0.5;}
/* Image View */
.accordiongallery.air .accordiongallery-preview{position:relative;opacity:0;-webkit-transition:all 500ms ease-in-out;-moz-transition:all 500ms ease-in-out;-o-transition:all 500ms ease-in-out;transition:all 500ms ease-in-out;}
/* Loader */
.accordiongallery.air .accordiongallery-loader{position:absolute;display:block;top:10px;right:10px;width:100px;height:12px;z-index:99;text-indent:-999px;background-image:url(air-loader.gif);background-repeat:no-repeat;}
.accordiongallery.air .accordiongallery-preview>img{margin-bottom:10px;}
/* Horizontal Scroller */
.accordiongallery.air .accordiongallery-scrollleft,.accordiongallery.air .accordiongallery-scrollright{width:10px;height:65px;opacity:0.6;background-repeat:no-repeat;background-position:left center;background-image:url(air-arrow-horizontal.png);text-indent:-9999px;}
.accordiongallery.air .accordiongallery-scrollright{float:right;background-position:right center;}
.accordiongallery.air .accordiongallery-scrollleft:hover,.accordiongallery.air .accordiongallery-scrollright:hover{opacity:1;}
/* Horizontal Thumbs */
.accordiongallery.air .accordiongallery-preview-thumbs{width:455px;padding:10px;overflow:hidden;position:relative;border:1px solid #b2b2b2;background-color:#bfbfc9;-moz-box-shadow:0px 2px 2px #fff;-webkit-box-shadow:0px 0px 4px #b2b2b2;box-shadow:0px 0px 4px #b2b2b2;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
.accordiongallery.air .accordiongallery-preview-thumbs a{margin-right:10px;opacity:0.7;}
.accordiongallery.air .accordiongallery-preview-thumbs a img{border:0px;}
.accordiongallery.air .accordiongallery-preview-thumbs a:hover,.accordiongallery.air .accordiongallery-preview-thumbs a:focus{opacity:1;}
.accordiongallery.air .accordiongallery-preview-scroller a img{width:80px;height:auto;}
.accordiongallery.air .accordiongallery-preview-scroller a p{display:none;}
.accordiongallery.air .accordiongallery-preview .image-caption{position:absolute;top:270px;left:50px;width:380px;padding:5px;border:1px solid #fff;background-color:#fff;background-color:rgba(255,255,255,0.5);color:#000;text-align:center;text-shadow:0px 1px 1px #fff;cursor:default;-moz-box-shadow:0px 0px 10px #333;-webkit-box-shadow:0px 0px 10px #333;box-shadow:0px 0px 10px #333;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;}
CSS代码(sen.full.min.css):
@charset utf-8;/** * SenCSS - Sensible Standards CSS framework * * Copyright (c) 2008-2009 Kilian Valkhof (kilianvalkhof.com) * Visit sencss.kilianvalkhof.com for more information and changelogs. * Licensed under the MIT license. http://www.opensource.org/licenses/mit-license.php * */
html,body,div,span,object,iframe,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,var,fieldset,form,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,dialog,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video{vertical-align:baseline;margin:0;padding:0}
article,aside,dialog,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video{display:block}
body{background:#fff;color:#000;font:75%/1.5em Arial,Helvetica,"DejaVu Sans","Liberation sans","Bitstream Vera Sans",sans-serif;position:relative}
textarea{font:101%/1.5em Arial,Helvetica,"DejaVu Sans","Liberation sans","Bitstream Vera Sans",sans-serif;border:1px solid #ccc;border-bottom-color:#eee;border-right-color:#eee;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-ms-box-sizing:border-box;width:100%;margin:0;padding:.29em 0}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
:focus{outline:none}
a{text-decoration:underline;border:0}
a:hover,a:focus{text-decoration:none}
a img{border:0}
abbr,acronym{border-bottom:1px dotted;cursor:help;font-variant:small-caps}
address,cite,em,i{font-style:italic}
blockquote p{margin:0 1.5em 1.5em;padding:.75em}
code,kbd,tt{font-family:"Courier New",Courier,monospace,serif;line-height:1.5}
del{text-decoration:line-through}
dfn{border-bottom:1px dashed;font-style:italic}
dl{margin:0 0 1.5em}
dd{margin-left:1.5em}
h1,h2,h3,h4,h5,h6{font-weight:700;padding:0}
h1{font-size:2em;margin:0 0 .75em}
h2{font-size:1.5em;margin:0 0 1em}
h3{font-size:1.1666em;margin:0 0 1.286em}
h4{font-size:1em;margin:0 0 1.5em}
h5{font-size:.8333em;margin:0 0 1.8em}
h6{font-size:.666em;margin:0 0 2.25em}
img{display:inline-block;vertical-align:text-bottom}
ins{text-decoration:overline}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}
ol{list-style:outside decimal}
p{font-weight:300;margin:0 0 1.5em}
pre{font-family:"Courier New",Courier,monospace,serif;margin:0 0 1.5em}
sub{top:.4em;font-size:.85em;line-height:1;position:relative;vertical-align:baseline}
sup{font-size:.85em;line-height:1;position:relative;bottom:.5em;vertical-align:baseline}
ul{list-style:outside disc}
ul,ol{margin:0 0 1.5em 1.5em;padding:0}
li ul,li ol{margin:0 0 1.5em 1.5em;padding:0}
table{border-collapse:collapse;border-spacing:0;margin:0 0 1.5em;padding:0}
caption{font-style:italic;text-align:left}
tr.alt td{background:#eee}
td{border:1px solid #000;vertical-align:middle;padding:.333em}
th{font-weight:700;vertical-align:middle;padding:.333em}
button{cursor:pointer;display:block;font-size:1em;height:2em;line-height:1.5em;margin:1.75em 0 0;padding:0 .5em}
button::-moz-focus-inner{border:0}
fieldset{border:0;position:relative;margin:0 0 1.5em;padding:1.5em 0 0}
fieldset fieldset{clear:both;margin:0 0 1.5em;padding:0 0 0 1.5em}
input{border:1px solid #ccc;border-bottom-color:#eee;border-right-color:#eee;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-ms-box-sizing:border-box;font-size:1em;height:1.5em;line-height:1.5em;width:100%;margin:0 0 .75em;padding:.29em 0}
input[type=file]{height:2.25em;padding:0}
select{border:1px solid #ccc;border-bottom-color:#eee;border-right-color:#eee;font-size:1em;height:2.25em;_margin:0 0 1.3em;margin:0 0 .8em;padding:.2em 0 0}
optgroup{font-weight:700;font-style:normal;text-indent:.2em}
optgroup + optgroup{margin-top:1em}
option{font-size:1em;height:1.5em;text-indent:1em;padding:0}
label{cursor:pointer;display:block;height:auto;line-height:1.4em;width:100%;margin:0;padding:0}
label input{background:0;border:0;height:1.5em;line-height:1.5em;width:auto;margin:0 .5em 0 0;padding:0}
legend{font-size:1.1666em;font-weight:700;left:0;margin:0;padding:0}
dt,strong,b{font-weight:700}
.amp{font-family:Baskerville,"Goudy Old Style",Palatino,"Book Antiqua","URW Chancery L",Gentium,serif;font-style:italic}
.quo{font-family:Georgia,Gentium,"Times New Roman",Times,serif}
.lquo{font-family:Georgia,Gentium,"Times New Roman",Times,serif;margin:0 0 0 -.55em}
.introParagraphArticle:first-letter{float:left;font-size:3.2em;font-weight:700;line-height:1em;margin:0 0 -.2em;padding:.125em .1em 0 0}
.message{background:#eee;border:1px solid #999;margin:1.5em;padding:.666em}
.error{background:#fee;border:1px solid red;margin:1.5em;padding:.666em}
.notice{background:#eef;border:1px solid #00f;margin:1.5em;padding:.666em}
.success{background:#efe;border:1px solid #0f0;margin:1.5em;padding:.666em}
.warning{background:#ffe;border:1px solid #ff0;padding:.666em}
.aside-left{clear:left;float:left;overflow:hidden;margin:0 1.5em 1.5em 0}
.aside-right{clear:right;float:right;overflow:hidden;margin:0 0 1.5em 1.5em}
.horizontalForm button{clear:left;float:left;margin:.25em 0 0}
.horizontalForm input,.horizontalForm textarea{float:left;width:49%;margin:0 0 .8em}
.horizontalForm select{float:left;_margin:0 0 1.25em;margin:0 0 .75em}
.horizontalForm label{clear:left;float:left;width:49%;padding:.375em 0}
.horizontalForm label input{height:1em;line-height:1.5em;width:auto;margin:.25em .5em 0 0}
.horizontalForm label.singleLine{clear:both;float:none;height:1.5em;width:100%;padding:0}
分享到QQ
分享到微博
微信扫一扫
