jQuery手风琴效果插件j-accordion特效代码

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

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

以下是 jQuery手风琴效果插件j-accordion特效代码的示例演示效果:

当前平台(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" />
<title>jQuery手风琴效果插件j-accordion</title>
<link rel="stylesheet" type="text/css" href="ccs/combo.css">
<link rel="stylesheet" type="text/css" href="css/zzsc.css">
</head>
<body><br />
<!-- 代码 开始 -->
<div class="accordion_container">
  <h1>栏目名称</h1>
  <div class="accordion">
	<div class="first current">
	  <div class="content"><a href="#" ><img src="images/200x95-1.jpg" /></a></div>
	  <div class="tab"><strong><a href="#" >图片标题-1</a></strong>
		<p>副标题-1</p>
	  </div>
	</div>
	<div class="second">
	  <div class="content second"><a href="#" ><img src="images/200x95-2.jpg" /></a></div>
	  <div class="tab"><strong><a href="#" >图片标题-2</a></strong>
		<p>副标题-2</p>
	  </div>
	</div>
	<div class="third">
	  <div class="content third"><a href="#" ><img src="images/200x95-3.jpg" /></a></div>
	  <div class="tab"><strong><a href="#" >图片标题-3</a></strong>
		<p>副标题-3</p>
	  </div>
	</div>
  </div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/j-accordin.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('.accordion').jaccordion();
	});
</script>
<!-- 代码 结束 -->
<div style="text-align:center;margin:30px 0">
<p style="margin:20px 0"></p>
<style>
body {text-align:center;}
.accordion_container {margin:0 auto;}
</style>
</div>
</body>
</html>

JS代码(j-accordin.min.js):

(function($){
	$.fn.jaccordion=function(){
	$(this).each(function(){
	var c=$(this).children().length;
	var d=Array(c-1);
	var e=Array(c-1);
	$(this).children().each(function(a){
	if(a==(c-1))return;
	e[a]=$(this).position().top;
	d[a]=$(this).position().top-$(this).children().outerHeight()}
);
	var f=this;
	$(this).children().mouseenter(function(){
	var a=$(f).children().index(this);
	var b=$(f).children().index($(f).children('[class~="current"]'));
	if(!$(this).hasClass('current')){
	if(b>a){
	for(var i=b-1;
	i>=a;
	i--){
	$($(f).children().get(i)).stop(false,false);
	to_top=e[i]+'px';
	$($(f).children().get(i)).animate({
	top:to_top}
)}
}
else if(b<a){
	for(var i=b;
	i<a;
	i++){
	$($(f).children().get(i)).stop(false,false);
	to_top=d[i]+'px';
	$($(f).children().get(i)).animate({
	top:to_top}
)}
}
$(f).children().removeClass('current');
	$(this).addClass('current')}
}
)}
)}
}
)(jQuery);

CSS代码(combo.css):

/*YUI 3.12.0 (build 8655935)Copyright 2013 Yahoo! Inc. All rights reserved.Licensed under the BSD License.http://yuilibrary.com/license/*/
html{color:#000;background:#FFF}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
input,textarea,select{*font-size:100%}
legend{color:#000}
#yui3-css-stamp.cssreset{display:none}
/*YUI 3.12.0 (build 8655935)Copyright 2013 Yahoo! Inc. All rights reserved.Licensed under the BSD License.http://yuilibrary.com/license/*/
body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small}
select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif}
table{font-size:inherit;font:100%}
pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%}
#yui3-css-stamp.cssfonts{display:none}
/*YUI 3.12.0 (build 8655935)Copyright 2013 Yahoo! Inc. All rights reserved.Licensed under the BSD License.http://yuilibrary.com/license/*/
.yui3-g{letter-spacing:-0.31em;*letter-spacing:normal;*word-spacing:-0.43em;text-rendering:optimizespeed}
.opera-only:-o-prefocus,.yui3-g{word-spacing:-0.43em}
.yui3-u{display:inline-block;zoom:1;*display:inline;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}
.yui3-u-1,.yui3-u-1-2,.yui3-u-1-3,.yui3-u-2-3,.yui3-u-1-4,.yui3-u-3-4,.yui3-u-1-5,.yui3-u-2-5,.yui3-u-3-5,.yui3-u-4-5,.yui3-u-1-6,.yui3-u-5-6,.yui3-u-1-8,.yui3-u-3-8,.yui3-u-5-8,.yui3-u-7-8,.yui3-u-1-12,.yui3-u-5-12,.yui3-u-7-12,.yui3-u-11-12,.yui3-u-1-24,.yui3-u-5-24,.yui3-u-7-24,.yui3-u-11-24,.yui3-u-13-24,.yui3-u-17-24,.yui3-u-19-24,.yui3-u-23-24{display:inline-block;zoom:1;*display:inline;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}
.yui3-u-1{display:block}
.yui3-u-1-2{width:50%}
.yui3-u-1-3{width:33.33333%}
.yui3-u-2-3{width:66.66666%}
.yui3-u-1-4{width:25%}
.yui3-u-3-4{width:75%}
.yui3-u-1-5{width:20%}
.yui3-u-2-5{width:40%}
.yui3-u-3-5{width:60%}
.yui3-u-4-5{width:80%}
.yui3-u-1-6{width:16.656%}
.yui3-u-5-6{width:83.33%}
.yui3-u-1-8{width:12.5%}
.yui3-u-3-8{width:37.5%}
.yui3-u-5-8{width:62.5%}
.yui3-u-7-8{width:87.5%}
.yui3-u-1-12{width:8.3333%}
.yui3-u-5-12{width:41.6666%}
.yui3-u-7-12{width:58.3333%}
.yui3-u-11-12{width:91.6666%}
.yui3-u-1-24{width:4.1666%}
.yui3-u-5-24{width:20.8333%}
.yui3-u-7-24{width:29.1666%}
.yui3-u-11-24{width:45.8333%}
.yui3-u-13-24{width:54.1666%}
.yui3-u-17-24{width:70.8333%}
.yui3-u-19-24{width:79.1666%}
.yui3-u-23-24{width:95.8333%}
#yui3-css-stamp.cssgrids{display:none}
/*YUI 3.12.0 (build 8655935)Copyright 2013 Yahoo! Inc. All rights reserved.Licensed under the BSD License.http://yuilibrary.com/license/*/
h1{font-size:138.5%}
h2{font-size:123.1%}
h3{font-size:108%}
h1,h2,h3{margin:1em 0}
h1,h2,h3,h4,h5,h6,strong{font-weight:bold}
abbr,acronym{border-bottom:1px dotted #000;cursor:help}
em{font-style:italic}
blockquote,ul,ol,dl{margin:1em}
ol,ul,dl{margin-left:2em}
ol{list-style:decimal outside}
ul{list-style:disc outside}
dl dd{margin-left:1em}
th,td{border:1px solid #000;padding:.5em}
th{font-weight:bold;text-align:center}
caption{margin-bottom:.5em;text-align:center}
p,fieldset,table,pre{margin-bottom:1em}
input[type=text],input[type=password],textarea{width:12.25em;*width:11.9em}
#yui3-css-stamp.cssbase{display:none}

CSS代码(zzsc.css):

#container{width:980px;margin:50px auto;}
.accordion_container{border:1px solid #aaa;margin:0 11.5px;}
.accordion_container > h1{z-index:4;padding:5px 8px;color:#393939;font-weight:bold;border-bottom:1px solid #aaa;font-size:123.1%;margin:0;}
.accordion_container{width:220px;}
.accordion_container .content,.accordion_container .tab{width:200px;}
.accordion_container .tab{background-color:#ededed;height:55px;border-bottom:1px solid #aaa;}
.accordion_container .tab strong{font-weight:bold;font-size:93%;}
.accordion_container .tab{padding:10px;}
.accordion_container .tab p{font-size:85%;color:#666;}
.accordion_container .content{background-color:#ededed;padding:10px;}
.accordion_container .content img{display:block;width:200px;height:95px;}
.accordion_container .first{z-index:3;top:0px;}
.accordion_container .second{z-index:2;top:76px;}
.accordion_container .third{z-index:1;top:152px;}
.accordion{position:relative;overflow:hidden;height:342px;}
.accordion > div{position:absolute;left:0px;border-left:1px solid #aaa;border-right:1px solid #aaa;left:-1px;cursor:pointer;background-color:#f7f7f7;}
.hide{}

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