以下是 5屏大气jquery手风琴特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>5屏大气jquery手风琴</title>
<!-- CSS files -->
<link href="css/layout.css" rel="stylesheet" />
<link href="css/liteaccordion.css" rel="stylesheet" />
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- jQuery easing -->
<script src="js/jquery.easing.1.3.js"></script>
<!-- liteAccordion jQuery library -->
<script src="js/liteaccordion.jquery.js"></script>
<script>
$(document).ready(function(){
$('#js_version').liteAccordion({
theme : 'dark',
rounded : true,
enumerateSlides : true,
firstSlide : 1,
linkable : true,
easing: 'easeInOutSine'
});
});
</script>
</head>
<body>
<header>
</header>
<h1>jQuery accordion (liteAccordion) version</h1>
<div id="js_version" class="accordion">
<ol>
<li data-slide-name="slide1">
<h2><span>Slide One</span></h2>
<div>
<img src="images/1.jpg" alt="Slide One" />
</div>
</li>
<li data-slide-name="slide2">
<h2><span>Slide Two</span></h2>
<div>
<img src="images/2.jpg" alt="Slide Two" />
</div>
</li>
<li data-slide-name="slide3">
<h2><span>Slide Three</span></h2>
<div>
<img src="images/3.jpg" alt="Slide Three" />
</div>
</li>
<li data-slide-name="slide4">
<h2><span>Slide Four</span></h2>
<div>
<img src="images/4.jpg" width="768" alt="Slide Four" />
</div>
</li>
<li data-slide-name="slide5">
<h2><span>Slide Five</span></h2>
<div>
<img src="images/5.jpg" alt="Slide Five" />
</div>
</li>
</ol>
<noscript>
<p>Please enable JavaScript to get the full experience.</p>
</noscript>
</div>
<a href="index2.html#slide1"><h2>Next (pure CSS3 version)</h2></a>
</body>
</html>
HTML代码(index2.html):
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>5屏大气jquery手风琴</title>
<!-- CSS files -->
<link href="css/layout.css" rel="stylesheet" />
<link href="css/main.css" rel="stylesheet" />
</head>
<body>
<header>
</header>
<h1>Pure CSS3 accordion version without animation</h1>
<div class="accordion css3accordion">
<span id="slide1"></span>
<span id="slide2"></span>
<span id="slide3"></span>
<span id="slide4"></span>
<span id="slide5"></span>
<ol>
<li class="slide1">
<a href="#slide1"><h2><span>Slide One</span></h2></a>
<div>
<img src="images/1.jpg" alt="Slide One" />
</div>
</li>
<li class="slide2">
<a href="#slide2"><h2><span>Slide Two</span></h2></a>
<div>
<img src="images/2.jpg" alt="Slide Two" />
</div>
</li>
<li class="slide3">
<a href="#slide3"><h2><span>Slide Three</span></h2></a>
<div>
<img src="images/3.jpg" alt="Slide Three" />
</div>
</li>
<li class="slide4">
<a href="#slide4"><h2><span>Slide Four</span></h2></a>
<div>
<img src="images/4.jpg" alt="Slide Four" />
</div>
</li>
<li class="slide5">
<a href="#slide5"><h2><span>Slide Five</span></h2></a>
<div>
<img src="images/5.jpg" alt="Slide Five" />
</div>
</li>
</ol>
</div>
<a href="index3.html"><h2>Next (pure CSS3 version with animation)</h2></a>
</body>
</html>
JS代码(jquery.easing.1.3.js):
/* * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/ * * Uses the built in easing capabilities added In jQuery 1.1 * to offer multiple easing options * * TERMS OF USE - jQuery Easing * * Open source under the BSD License. * * Copyright © 2008 George McGinley Smith * All rights reserved. * * Redistribution and use in source and binary forms,with or without modification,* are permitted provided that the following conditions are met:* * Redistributions of source code must retain the above copyright notice,this list of * conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice,this list * of conditions and the following disclaimer in the documentation and/or other materials * provided with the distribution. * * Neither the name of the author nor the names of contributors may be used to endorse * or promote products derived from this software without specific prior written permission. * * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY * EXPRESS OR IMPLIED WARRANTIES,INCLUDING,BUT NOT LIMITED TO,THE IMPLIED WARRANTIES OF * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT,INDIRECT,INCIDENTAL,SPECIAL,* EXEMPLARY,OR CONSEQUENTIAL DAMAGES (INCLUDING,BUT NOT LIMITED TO,PROCUREMENT OF SUBSTITUTE * GOODS OR SERVICES;
LOSS OF USE,DATA,OR PROFITS;
OR BUSINESS INTERRUPTION) HOWEVER CAUSED * AND ON ANY THEORY OF LIABILITY,WHETHER IN CONTRACT,STRICT LIABILITY,OR TORT (INCLUDING * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,EVEN IF ADVISED * OF THE POSSIBILITY OF SUCH DAMAGE. **/
// t:current time,b:begInnIng value,c:change In value,d:durationjQuery.easing['jswing'] = jQuery.easing['swing'];
jQuery.extend( jQuery.easing,{
def:'easeOutQuad',swing:function (x,t,b,c,d){
//alert(jQuery.easing.default);
return jQuery.easing[jQuery.easing.def](x,t,b,c,d);
}
,easeInQuad:function (x,t,b,c,d){
return c*(t/=d)*t + b;
}
,easeOutQuad:function (x,t,b,c,d){
return -c *(t/=d)*(t-2) + b;
}
,easeInOutQuad:function (x,t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t + b;
return -c/2 * ((--t)*(t-2) - 1) + b;
}
,easeInCubic:function (x,t,b,c,d){
return c*(t/=d)*t*t + b;
}
,easeOutCubic:function (x,t,b,c,d){
return c*((t=t/d-1)*t*t + 1) + b;
}
,easeInOutCubic:function (x,t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t*t + b;
return c/2*((t-=2)*t*t + 2) + b;
}
,easeInQuart:function (x,t,b,c,d){
return c*(t/=d)*t*t*t + b;
}
,easeOutQuart:function (x,t,b,c,d){
return -c * ((t=t/d-1)*t*t*t - 1) + b;
}
,easeInOutQuart:function (x,t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
return -c/2 * ((t-=2)*t*t*t - 2) + b;
}
,easeInQuint:function (x,t,b,c,d){
return c*(t/=d)*t*t*t*t + b;
}
,easeOutQuint:function (x,t,b,c,d){
return c*((t=t/d-1)*t*t*t*t + 1) + b;
}
,easeInOutQuint:function (x,t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
return c/2*((t-=2)*t*t*t*t + 2) + b;
}
,easeInSine:function (x,t,b,c,d){
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
}
,easeOutSine:function (x,t,b,c,d){
return c * Math.sin(t/d * (Math.PI/2)) + b;
}
,easeInOutSine:function (x,t,b,c,d){
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
}
,easeInExpo:function (x,t,b,c,d){
return (t==0) ? b:c * Math.pow(2,10 * (t/d - 1)) + b;
}
,easeOutExpo:function (x,t,b,c,d){
return (t==d) ? b+c:c * (-Math.pow(2,-10 * t/d) + 1) + b;
}
,easeInOutExpo:function (x,t,b,c,d){
if (t==0) return b;
if (t==d) return b+c;
if ((t/=d/2) < 1) return c/2 * Math.pow(2,10 * (t - 1)) + b;
return c/2 * (-Math.pow(2,-10 * --t) + 2) + b;
}
,easeInCirc:function (x,t,b,c,d){
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
}
,easeOutCirc:function (x,t,b,c,d){
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
}
,easeInOutCirc:function (x,t,b,c,d){
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
}
,easeInElastic:function (x,t,b,c,d){
var s=1.70158;
var p=0;
var a=c;
if (t==0) return b;
if ((t/=d)==1) return b+c;
if (!p) p=d*.3;
if (a < Math.abs(c)){
a=c;
var s=p/4;
}
else var s = p/(2*Math.PI) * Math.asin (c/a);
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
}
,easeOutElastic:function (x,t,b,c,d){
var s=1.70158;
var p=0;
var a=c;
if (t==0) return b;
if ((t/=d)==1) return b+c;
if (!p) p=d*.3;
if (a < Math.abs(c)){
a=c;
var s=p/4;
}
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
}
,easeInOutElastic:function (x,t,b,c,d){
var s=1.70158;
var p=0;
var a=c;
if (t==0) return b;
if ((t/=d/2)==2) return b+c;
if (!p) p=d*(.3*1.5);
if (a < Math.abs(c)){
a=c;
var s=p/4;
}
else var s = p/(2*Math.PI) * Math.asin (c/a);
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
}
,easeInBack:function (x,t,b,c,d,s){
if (s == undefined) s = 1.70158;
return c*(t/=d)*t*((s+1)*t - s) + b;
}
,easeOutBack:function (x,t,b,c,d,s){
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
}
,easeInOutBack:function (x,t,b,c,d,s){
if (s == undefined) s = 1.70158;
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}
,easeInBounce:function (x,t,b,c,d){
return c - jQuery.easing.easeOutBounce (x,d-t,0,c,d) + b;
}
,easeOutBounce:function (x,t,b,c,d){
if ((t/=d) < (1/2.75)){
return c*(7.5625*t*t) + b;
}
else if (t < (2/2.75)){
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
}
else if (t < (2.5/2.75)){
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
}
else{
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
}
,easeInOutBounce:function (x,t,b,c,d){
if (t < d/2) return jQuery.easing.easeInBounce (x,t*2,0,c,d) * .5 + b;
return jQuery.easing.easeOutBounce (x,t*2-d,0,c,d) * .5 + c*.5 + b;
}
}
);
/* * * TERMS OF USE - EASING EQUATIONS * * Open source under the BSD License. * * Copyright © 2001 Robert Penner * All rights reserved. * * Redistribution and use in source and binary forms,with or without modification,* are permitted provided that the following conditions are met:* * Redistributions of source code must retain the above copyright notice,this list of * conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice,this list * of conditions and the following disclaimer in the documentation and/or other materials * provided with the distribution. * * Neither the name of the author nor the names of contributors may be used to endorse * or promote products derived from this software without specific prior written permission. * * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY * EXPRESS OR IMPLIED WARRANTIES,INCLUDING,BUT NOT LIMITED TO,THE IMPLIED WARRANTIES OF * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT,INDIRECT,INCIDENTAL,SPECIAL,* EXEMPLARY,OR CONSEQUENTIAL DAMAGES (INCLUDING,BUT NOT LIMITED TO,PROCUREMENT OF SUBSTITUTE * GOODS OR SERVICES;
LOSS OF USE,DATA,OR PROFITS;
OR BUSINESS INTERRUPTION) HOWEVER CAUSED * AND ON ANY THEORY OF LIABILITY,WHETHER IN CONTRACT,STRICT LIABILITY,OR TORT (INCLUDING * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,EVEN IF ADVISED * OF THE POSSIBILITY OF SUCH DAMAGE. * */
CSS代码(main.css):
/* CSS3 accordion */
.css3accordion{border:9px solid #353535;border-radius:6px;padding:5px 5px 6px 0;background:#030303;height:320px;width:960px;/* CSS3 shadows */
-webkit-box-shadow:0 -1px 0 #555 inset,0 5px 15px rgba(0,0,0,0.5);-moz-box-shadow:0 -1px 0 #555 inset,0 5px 15px rgba(0,0,0,0.5);-ms-box-shadow:0 -1px 0 #555 inset,0 5px 15px rgba(0,0,0,0.5);-o-box-shadow:0 -1px 0 #555 inset,0 5px 15px rgba(0,0,0,0.5);box-shadow:0 -1px 0 #555 inset,0 5px 15px rgba(0,0,0,0.5);}
/* hide first level spans */
.css3accordion > span{display:none}
/* main accordion styles and slides */
.css3accordion ol{height:100%;list-style:none;overflow:hidden;position:relative;}
.css3accordion li{float:left;height:100%;overflow:hidden;position:relative;width:48px;/* CSS3 transition for slides */
-webkit-transition:all 0.9s ease-in-out;-moz-transition:all 0.9s ease-in-out;-ms-transition:all 0.9s ease-in-out;-o-transition:all 0.9s ease-in-out;transition:all 0.9s ease-in-out;}
.css3accordion li a{display:block;float:left;height:320px;position:relative;width:48px;}
/* slide headers */
.css3accordion h2{font-size:16px;font-weight:normal;height:48px;left:0;line-height:265%;margin:0;position:absolute;top:0;width:320px;z-index:1;-webkit-backface-visibility:hidden;-webkit-transform:translateX(-100%) rotate(-90deg);-webkit-transform-origin:right top;-moz-transform:translateX(-100%) rotate(-90deg);-moz-transform-origin:right top;-ms-transform:translateX(-100%) rotate(-90deg);-ms-transform-origin:right top;-o-transform:translateX(-100%) rotate(-90deg);-o-transform-origin:right top;transform:translateX(-100%) rotate(-90deg);transform-origin:right top;}
.css3accordion h2 span{background-color:#353535;border-radius:4px;color:#fff;display:block;margin-top:5px;padding-right:10%;text-align:right;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;}
.css3accordion h2 span:hover{background-color:#353535;background:-webkit-gradient(linear,left top,right top,color-stop(0%,#353535),color-stop(100%,#555555));background:-webkit-linear-gradient(left,#353535 0%,#555555 100%);background:-moz-linear-gradient(left,#353535 0%,#555555 100%);background:-ms-linear-gradient(left,#353535 0%,#555555 100%);background:-o-linear-gradient(left,#353535 0%,#555555 100%);background:linear-gradient(left,#353535 0%,#555555 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535',endColorstr='#555555',GradientType=1 );}
/* 'counter' object */
.css3accordion h2 span:after{color:#080808;font-weight:bold;left:10%;position:absolute;text-shadow:-1px 1px 0 #555555;top:10%;/* CSS3 rotate for 'counter' */
-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg);}
/* 'counter' values */
li.slide1 h2 span:after{content:"1";}
li.slide2 h2 span:after{content:"2";}
li.slide3 h2 span:after{content:"3";}
li.slide4 h2 span:after{content:"4";}
li.slide5 h2 span:after{content:"5";}
/* inner slide content */
.css3accordion li div{margin-left:5px;padding-left:48px;}
/* onclick behavior */
#slide1:target ~ ol li.slide1,#slide2:target ~ ol li.slide2,#slide3:target ~ ol li.slide3,#slide4:target ~ ol li.slide4,#slide5:target ~ ol li.slide5{width:768px;}
#slide1:target ~ ol li.slide1 span,#slide2:target ~ ol li.slide2 span,#slide3:target ~ ol li.slide3 span,#slide4:target ~ ol li.slide4 span,#slide5:target ~ ol li.slide5 span{background:#353535;background:-webkit-gradient(linear,left top,right top,color-stop(0%,#353535),color-stop(100%,#555555));background:-webkit-linear-gradient(left,#353535 0%,#555555 100%);background:-moz-linear-gradient(left,#353535 0%,#555555 100%);background:-ms-linear-gradient(left,#353535 0%,#555555 100%);background:-o-linear-gradient(left,#353535 0%,#555555 100%);background:linear-gradient(left,#353535 0%,#555555 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535',endColorstr='#555555',GradientType=1 );}
分享到QQ
分享到微博
微信扫一扫
