jquery自动手风琴特效代码

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

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

以下是 jquery自动手风琴特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
	<title>jquery自动手风琴</title>
	<link rel="stylesheet" href="css/style.css" />
	<link rel="stylesheet" href="css/slidorion.css" />
	<!--<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200,700' rel='stylesheet' type='text/css'>-->
	<script src="js/jquery.min.js"></script>
	<script src="js/jquery.easing.js"></script>
    <script src="js/jquery.slidorion.min.js"></script>	
    <script>
	$(function() {
		$('#slidorion').slidorion({
			first: 2,
			autoPlay: false,
			easing: 'easeInOutCubic',
			effect: 'random'
		});
	});
	</script>
</head>
<body>
	<div id="header"><h1>SLIDORION</h1></div>
	<div id="slidorion">
		
		<div id="slider">
			<div id="slide1" class="slide">
				<img src="img/spiderman.jpg" width="488" height="400" />
			</div>
			<div id="slide2" class="slide">
				<img src="img/kick-ass.jpg" width="488" height="400" />
			</div>
			<div id="slide3" class="slide">
				<img src="img/hot-fuzz.jpg" width="488" height="400" />
			</div>
		</div>
		
		<div id="accordion">
			<div class="link-header">New Features</div>
			<div class="link-content">
				<p><strong>Slidorion</strong> has under gone some pretty important changes recently.</p>
				<p>It now <strong>supports HTML</strong> and not just images, something that is going to improve the usability of Slidorion a lot.</p>
				<p>Some new effects have been added, most importantly <strong>pan and zoom</strong>! Along with this are performance upgrades and <strong>vital bug fixes</strong>.</p>
			</div>
			<div class="link-header">Embedded Images</div>
			<div class="link-content">
				<p>Batman raises the stakes in his war on crime. With the help of Lieutenant Jim Gordon and District Attorney Harvey Dent, Batman sets out to dismantle the remaining criminal organizations that plague the city streets. But they soon find themselves prey to a reign of chaos unleashed by a rising criminal mastermind known to the terrified citizens of Gotham as The Joker.</p>
				<a href="#">Read more</a>
			</div>
			<div class="link-header">Current Effects</div>
			<div class="link-content">
				<p>Top London cop, PC Nicholas Angel is good. Too good. And to stop the rest of his team looking bad, he is reassigned to the quiet town of Sandford. Everything seems quiet for Angel, until two actors are found decapitated. It is called an accident, but Angel isn't going to accept that, especially when more and more people turn up dead.</p>
				<a href="#">Read more</a>
			</div>
		</div>
	</div>
</body>
</html>

JS代码(jquery.slidorion.min.js):

/** Slidorion,An Image Slider and Accordion Combined* Intructions:http://www.slidorion.com* Created by Ben Holland - http://www.ben-holland.co.uk* Version:1.0* Copyright 2011 Ben Holland <benholland99@gmail.com>** Licensed under the Apache License,Version 2.0 (the "License");
	* you may not use this file except in compliance with the License.* You may obtain a copy of the License at** http://www.apache.org/licenses/LICENSE-2.0** Unless required by applicable law or agreed to in writing,software* distributed under the License is distributed on an "AS IS" BASIS,* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,either express or implied.* See the License for the specific language governing permissions and* limitations under the License.*/
(function(a){
	a.fn.extend({
	slidorion:function(b){
	var c={
	autoPlay:true,easing:"",effect:"fade",first:1,interval:5e3,hoverPause:false,speed:1e3}
;
	var b=a.extend(c,b);
	return this.each(function(){
	function G(){
	for(var b=m;
	b>0;
	b--){
	a("#slider > div:eq("+(b-1)+")",r).css("z-index",l);
	l++}
}
function F(a){
	if(a==m){
	a=0;
	return a}
else{
	return a}
}
function E(){
	clearInterval(r.data("interval"));
	y=setInterval(function(){
	B(d,g,f,h)}
,i);
	r.data("interval",y)}
function D(){
	clearInterval(r.data("interval"))}
function C(){
	y=setInterval(function(){
	B(d,g,f,h)}
,i);
	r.data("interval",y)}
function B(b,c,d,e){
	var f=F(b);
	a("#accordion .link-header:eq("+f+")",r).trigger("click",A)}
function A(){
	if(p==false){
	$objHeader=a(this,r);
	var b=$objHeader.index()/2+1;
	if(b==d){
	return false}
else{
	a(".link-header.active",r).removeClass("active").next(".link-content").slideUp();
	$objHeader.addClass("active").next(".link-content").slideDown();
	z(d,b,g,f,h)}
l++;
	d=b;
	return false}
}
function z(b,c,d,e,f){
	if(!p){
	p=true;
	if(k==true&&o==false){
	E()}
$current=a("#slider > div:eq("+(b-1)+")",r);
	$new=a("#slider > div:eq("+(c-1)+")",r);
	var g=$current.outerWidth();
	var h=$current.outerHeight();
	if(d=="random"){
	var i=Math.floor(Math.random()*s.length);
	d=s[i];
	while(d==q){
	var i=Math.floor(Math.random()*s.length);
	d=s[i]}
}
else if(d=="slideRandom"){
	var i=Math.floor(Math.random()*t.length);
	d=t[i];
	while(d==q){
	var i=Math.floor(Math.random()*t.length);
	d=t[i]}
}
else if(d=="overRandom"){
	var i=Math.floor(Math.random()*u.length);
	d=u[i];
	while(d==q){
	var i=Math.floor(Math.random()*u.length);
	d=u[i]}
}
q=d;
	switch(d){
	case"fade":$new.css({
	"z-index":l,top:"0",left:"0",display:"none"}
).fadeIn(e);
	break;
	case"slideLeft":$new.css({
	left:g,top:"0",opacity:"1","z-index":l}
);
	$current.animate({
	left:"-="+g,top:"0",opacity:"1"}
,{
	queue:true,duration:e,easing:f}
);
	$new.animate({
	left:"-="+g,top:"0",opacity:"1"}
,{
	queue:true,duration:e,easing:f}
);
	break;
	case"slideRight":$new.css({
	left:"-"+g+"px",top:"0",opacity:"1","z-index":l}
);
	$current.animate({
	left:"+="+g,top:"0",opacity:"1"}
,{
	queue:true,duration:e,easing:f}
);
	$new.animate({
	left:"+="+g,top:"0",opacity:"1"}
,{
	queue:true,duration:e,easing:f}
);
	break;
	case"slideUp":$new.css({
	top:h,left:"0",opacity:"1","z-index":l}
);
	$current.animate({
	top:"-="+h,left:"0",opacity:"1"}
,{
	queue:true,duration:e,easing:f}
);
	$new.animate({
	top:"-="+h,left:"0",opacity:"1"}
,{
	queue:true,duration:e,easing:f}
);
	break;
	case"slideDown":$new.css({
	top:"-"+h+"px",left:"0",opacity:"1","z-index":l}
);
	$current.animate({
	top:"+="+h,left:"0",opacity:"1"}
,{
	queue:true,duration:e,easing:f}
);
	$new.animate({
	top:"+="+h,left:"0",opacity:"1"}
,{
	queue:true,duration:e,easing:f}
);
	break;
	case"overLeft":$new.css({
	left:g,top:"0",opacity:"1","z-index":l}
);
	$new.animate({
	left:"-="+g,top:"0",opacity:"1"}
,{
	queue:true,duration:e,easing:f}
);
	break;
	case"overRight":$new.css({
	left:"-"+g+"px",top:"0",opacity:"1","z-index":l}
);
	$new.animate({
	left:"+="+g,top:"0",opacity:"1"}
,{
	queue:true,duration:e,easing:f}
);
	break;
	case"overUp":$new.css({
	top:h,left:"0",opacity:"1","z-index":l}
);
	$new.animate({
	top:"-="+h,left:"0",opacity:"1"}
,{
	queue:true,duration:e,easing:f}
);
	break;
	case"overDown":$new.css({
	top:"-"+h+"px",left:"0",opacity:"1","z-index":l}
);
	$new.animate({
	top:"+="+h,left:"0",opacity:"1"}
,{
	queue:true,duration:e,easing:f}
);
	break;
	case"none":$new.css({
	"z-index":l}
);
	break}
setTimeout(function(){
	p=false}
,e)}
}
var c=b;
	var d=c.first;
	var e=c.first+1;
	var f=c.speed;
	var g=c.effect;
	var h=c.easing;
	var i=c.interval;
	var j=c.hoverPause;
	var k=c.autoPlay;
	var l=1;
	var m=0;
	var n=0;
	var o=false;
	var p=false;
	var q="";
	var r=a(this);
	var s=new Array("fade","slideLeft","slideUp","slideRight","slideDown","overLeft","overRight","overUp","overDown");
	var t=new Array("slideLeft","slideUp","slideRight","slideDown");
	var u=new Array("overLeft","overRight","overUp","overDown");
	var v=new Array("wipeDown","wipeUp");
	var w=new Array("wipeDownFade","wipeUpFade");
	var x=new Array("wipeDown","wipeUp","wipeDownFade","wipeUpFade");
	m=a("#slider > div",r).size();
	r.data("slideCount",m);
	n=a("#accordion > .link-header",r).size();
	r.data("accordCount",n);
	if(m==n){
	if(k==true){
	var y=setInterval(function(){
	B(d,g,f,h)}
,i);
	r.data("interval",y)}
if(j==true&&k==true){
	r.hover(function(){
	o=true;
	D()}
,function(){
	o=false;
	E()}
)}
G();
	a("#slider > div:eq("+(d-1)+")",r).css("z-index",l);
	l++;
	if(g!="fade"||g!="none"){
	a("#slider > div",r).css({
	top:"0",left:"-600px"}
);
	a("#slider > div:eq("+(d-1)+")",r).css({
	top:"0",left:"0"}
)}
a(".link-content",r).hide();
	a("#accordion .link-header:eq("+(d-1)+")",r).addClass("active").next().show();
	a(".link-header",r).click(A)}
else{
	alert("The number of slider images does not match the number of accordion sections.");
	console.log("The number of slider images does not match the number of accordion sections.")}
}
)}
}
)}
)(jQuery)

CSS代码(fullscreen-demo.css):

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License:none (public domain)*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
/*Stylesheet for slidorion */
body,html{height:100%;overflow:hidden;}
#slidorion{width:100%;/* Set to slidorion width. Is equal to #slider + #accordion width */
min-height:100%;/* Set to slidorion height. Is equal to #slider and #accordion height */
position:relative;left:0;top:0;background:#cbcbcb;border:1px solid #bbb;-webkit-box-shadow:0 0 34px #bbb;-moz-box-shadow:0 0 34px #bbb;box-shadow:0 0 34px #bbb;}
#slider{width:80%;height:100%;position:absolute;left:0;top:0;overflow:hidden;}
.slider-image{position:relative;}
#accordion{position:absolute;right:0;top:0;width:20%;height:100%;font-family:Verdana;background:#eee;-webkit-box-shadow:-3px 0px 3px -1px rgba(51,51,51,0.3);-moz-box-shadow:-3px 0px 3px -1px rgba(51,51,51,0.3);box-shadow:-3px 0px 3px -1px rgba(51,51,51,0.3);z-index:999;}
#accordion .header{height:49px;color:#333;background:#ededed;background:-moz-linear-gradient(top,#ededed 59%,#dcdcdc 100%);background:-webkit-linear-gradient(top,#ededed 59%,#dcdcdc 100%);background:-o-linear-gradient(top,#ededed 59%,#dcdcdc 100%);background:-ms-linear-gradient(top,#ededed 59%,#dcdcdc 100%);background:linear-gradient(top,#ededed 59%,#dcdcdc 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed',endColorstr='#dcdcdc',GradientType=0 );border:none;border-top:1px solid #ccc;}
#accordion .header a{background:none;padding:19px 14px;text-decoration:none;font-weight:bold;font-size:12px;display:block;}
#accordion .header a:hover{background:#ededed;cursor:pointer;}
#accordion .header a.active{border-bottom:none;background-color:#676767 !important;color:#fff;}
#accordion .content{height:100%;font-weight:bold;font-size:12px;margin:0;padding:16px;border:none;background:#d6d6d6;background:-moz-linear-gradient(top,#d6d6d6 0%,#ffffff 10%);background:-webkit-linear-gradient(top,#d6d6d6 0%,#ffffff 10%);background:-o-linear-gradient(top,#d6d6d6 0%,#ffffff 10%);background:-ms-linear-gradient(top,#d6d6d6 0%,#ffffff 10%);background:linear-gradient(top,#d6d6d6 0%,#ffffff 10%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6',endColorstr='#ffffff',GradientType=0 );overflow:auto;}

CSS代码(style.css):

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License:none (public domain)*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
/*MAIN STYLES*/
body,html{background:#ededed;height:100%;line-height:20px;font-size:14px;color:#333;font-family:Helvetica,Tahoma,sans-serif;font-weight:normal;}
h1,h2,h3{font-family:'Yanone Kaffeesatz',sans-serif;font-weight:bold;}
h1{font-size:90px;text-shadow:0 0 1px rgba(51,51,51,0.3);text-align:center;line-height:90px;}
h2{font-size:36px;line-height:36px;text-shadow:0 0 1px rgba(51,51,51,0.2);padding-bottom:5px;margin-bottom:15px;border-bottom:1px solid #ccc;}
h3{font-size:30px;line-height:38px;margin-bottom:14px;}
h4{font-size:16px;line-height:24px;font-weight:bold;}
a:link,a:active,a:visited{border:none;outline:none;color:#072B29;}
#header{width:1000px;height:120px;margin:20px auto;}
#accordion p{margin-bottom:14px;}
#accordion strong{font-weight:bold !important;}
#slide1{background:#f2f2f2;}
#slide1 .content{padding:20px;font-family:'Yanone Kaffeesatz',sans-serif;font-weight:bold;}
#slide1 h4{font-size:24px !important;line-height:28px !important;}
#slide1 .content ul{list-style:square;margin-top:15px;margin-left:40px;}
#slide1 .content li{margin-bottom:10px;}
#slide3{background:url(../img/slide-bg.jpg) center center no-repeat;color:#fff !important;}
#slide3 .content{padding:15px 20px;}
#slide3 a{color:#ddd;}
#slide3 .content h1{text-align:left;font-size:60px;}
#slidorion2{width:768px;/* Set to slidorion width. Is equal to #slider + #accordion width */
height:400px;/* Set to slidorion height. Is equal to #slider and #accordion height */
position:relative;left:50%;margin-left:-384px;padding:10px;background:#cbcbcb;border:1px solid #bbb;-webkit-box-shadow:0 0 34px #bbb;-moz-box-shadow:0 0 34px #bbb;box-shadow:0 0 34px #bbb;}
strong{font-weight:bold;}
#container{width:800px;margin:30px auto;position:relative;}
#container >div{width:78%;margin-bottom:30px;}
#container > div > pre{background:#E2DBD1;border:1px solid #D1BFA6;color:#333;font-family:Helvetica,Tahoma,sans-serif;margin-bottom:20px;padding:5px 10px;border-left:10px solid #D1BFA6;}
#options li{margin:20px 0;border-bottom:1px solid #ddd;}
#options li p{font-size:15px;letter-spacing:0;line-height:30px;}
#download-box{width:170px !important;position:absolute;margin-left:620px;padding:10px;background:#ebf1f6;background:-moz-linear-gradient(top,#ebf1f6 0%,#cbdfed 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ebf1f6),color-stop(100%,#cbdfed));background:-webkit-linear-gradient(top,#ebf1f6 0%,#cbdfed 100%);background:-o-linear-gradient(top,#ebf1f6 0%,#cbdfed 100%);background:-ms-linear-gradient(top,#ebf1f6 0%,#cbdfed 100%);background:linear-gradient(top,#ebf1f6 0%,#cbdfed 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6',endColorstr='#cbdfed',GradientType=0 );border-radius:4px;border:1px solid #bbb;float:right;}
#download-box p,#download-box h3{text-align:center;font-weight:bold;letter-spacing:0px;margin:15px 0;font-size:100%;line-height:20px;}
#download-box h3{font-size:200%;line-height:30px;}
#download-box p{font-size:80%;}
.download{text-indent:-9999px;margin-left:15px;background:url(../img/download_buttons.png) 0 -2px no-repeat;width:140px;height:50px;display:block;overflow:hidden;}
.download:hover{background-position:0 -51px;}
#download-box .social-media{width:54px;height:70px;vertical-align:top;display:inline-block;}
.changes{margin-bottom:15px;}
#footer{height:200px;}

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