经验分享程序开发文档资料数据资源其它资源

jQuery横向和纵向手风琴切换特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery横向和纵向手风琴切换特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery横向和纵向手风琴切换特效代码

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery横向和纵向手风琴切换</title>
<link rel="stylesheet" type="text/css" href="css/accordion.css" />
<script language="javascript" type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.msAccordion.js"></script>
<style type="text/css">
.set{border-bottom:1px solid #000}
.set1{background-color:#C77B3F;}
.set2{background-color:#FFC732;}
.set3{background-color:#007C90;}
.set4{background-color:#AD6F08;}
.set5{background-color:#387855;}
.set6{background-color:#8C4B2D;}
.set7{background-color:#82A668;}
</style>
</head>

<body>
<h1>Horizontal Accordion</h1>

<div id="accordionGiftLelo">
  <div class="set">
    <div class="title"><img src="images/DEVIL_EYES_1.jpg" width="29" height="198" /></div>
    <div class="content"><a href="#"><img src="images/devilEyes.jpg" alt="Embroidered Devil Eyes" width="486" height="198" border="0" /></a></div>
  </div>
  <div class="set">
    <div class="title"><img src="images/SPRING_EMBROIDERY_1.jpg" width="29" height="198" /></div>
    <div class="content"><a href="#"><img src="images/spring-emroidery.jpg" alt="Spring Embroidery" width="486" height="198" border="0" /></a></div>
  </div>

  <div class="set">
    <div class="title"><img src="images/CHARMING_FAIRY_1.jpg" width="29" height="198" /></div>
    <div class="content"><a href="#"><img src="images/charmingFairy.jpg" alt="" width="486" height="198" border="0" /></a> </div>
  </div>
  <div class="set">
    <div class="title"><img src="images/GEOMETRICAL_1.jpg" width="29" height="198" /></div>
    <div class="content"><a href="#"><img src="images/geomatical_embrodery.jpg" alt="Geometrical Embroidery" width="486" height="198" border="0" /></a><br />
    </div>

  </div>
  <div class="set">
    <div class="title"><img src="images/ELEPHANT_LUCK_1.jpg" width="29" height="198" /></div>
    <div class="content"><a href="#"><img src="images/elephant-luck.jpg" alt="Elephant with Luck" width="486" height="198" border="0" /></a></div>
  </div>
  <div class="set">
    <div class="title"><img src="images/LADY_RED_1.jpg" width="29" height="198" /></div>
    <div class="content"><a href="#"><img src="images/lady-in-red.jpg" alt="Lady in Red" width="486" height="198" border="0" /></a></div>
  </div>

  <div class="set">
    <div class="title"><img src="images/FIREWORKS_ART_1.jpg" width="29" height="198" /></div>
    <div class="content"><a href="#"><img src="images/fireworks-embroidery.jpg" alt="Fireworks Embroidery Art" width="486" height="198" border="0" /></a></div>
  </div>
</div>

<h1>Horizontal Accordion - Automatic Delay 4 sec</h1>
<div class="accordionWrapper" id="accordion1">
<div class="set set1">
    <div class="title"><img src="images/menu1-h.jpg" width="30" height="198" /></div>
    <div class="content"><img src="images/menu-img-1.jpg" width="486" height="198" /></div>

</div>
<div class="set set2">
    <div class="title"><img src="images/menu2-h.jpg" width="30" height="198" /></div>
    <div class="content"><img src="images/menu-img-2.jpg" width="486" height="198" /></div>
</div>
<div class="set set3">
    <div class="title"><img src="images/menu3-h.jpg" width="30" height="198" /></div>
    <div class="content"><img src="images/menu-img-3.jpg" width="486" height="198" />
    </div>
</div>
<div class="set set4">
    <div class="title"><img src="images/menu4-h.jpg" width="30" height="198" /></div>

    <div class="content"><img src="images/menu-img-4.jpg" width="486" height="198" /><br />
</div>
</div>
<div class="set set5">
    <div class="title"><img src="images/menu5-h.jpg" width="30" height="198" /></div>
    <div class="content"><img src="images/menu-img-5.jpg" width="486" height="198" /></div>
</div>
<div class="set set6">
    <div class="title"><img src="images/menu6-h.jpg" width="30" height="198" /></div>
    <div class="content"><img src="images/menu-img-6.jpg" width="486" height="198" /></div>
</div>
<div class="set set7">

    <div class="title"><img src="images/menu7-h.jpg" width="30" height="198" /></div>
    <div class="content"><img src="images/menu-img-7.jpg" width="486" height="198" /></div>
</div>
</div>
<br />
<h1>Nested Accordion - Click on set 2</h1>
<div class="accordionWrapper" id="accordionNested">
<div class="set set1">
    <div class="title"><img src="images/menu1-h.jpg" width="30" height="198" /></div>
    <div class="content"><img src="images/menu-img-1.jpg" width="486" height="198" /></div>
</div>
<div class="set set2">

    <div class="title"><img src="images/menu2-h.jpg" width="30" height="198" /></div>
    <div class="content">
    <div id="accordionNestedChild">
  <div class="set set1">
    <div class="title"><img src="images/DEVIL_EYES.jpg" width="198" height="29" /></div>
    <div class="content"><a href="#"><img src="images/devilEyes.jpg" alt="Embroidered Devil Eyes" width="486" height="198" border="0" /></a></div>
  </div>
  <div class="set set2">
    <div class="title"><img src="images/SPRING_EMBROIDERY.jpg" width="198" height="29" /></div>

    <div class="content"><a href="#"><img src="images/spring-emroidery.jpg" alt="Spring Embroidery" width="486" height="198" border="0" /></a></div>
  </div>
  <div class="set set3">
    <div class="title"><img src="images/CHARMING_FAIRY.jpg" width="198" height="29" /></div>
    <div class="content"><a href="#"><img src="images/charmingFairy.jpg" alt="" width="486" height="198" border="0" /></a> </div>
  </div>
</div>
    </div>
</div>

<div class="set set3">
    <div class="title"><img src="images/menu3-h.jpg" width="30" height="198" /></div>
    <div class="content"><img src="images/menu-img-3.jpg" width="486" height="198" />
    </div>
</div>
<div class="set set4">
    <div class="title"><img src="images/menu4-h.jpg" width="30" height="198" /></div>
    <div class="content"><img src="images/menu-img-4.jpg" width="486" height="198" /><br />
</div>
</div>
<div class="set set5">
    <div class="title"><img src="images/menu5-h.jpg" width="30" height="198" /></div>

    <div class="content"><img src="images/menu-img-5.jpg" width="486" height="198" /></div>
</div>
<div class="set set6">
    <div class="title"><img src="images/menu6-h.jpg" width="30" height="198" /></div>
    <div class="content"><img src="images/menu-img-6.jpg" width="486" height="198" /></div>
</div>
<div class="set set7">
    <div class="title"><img src="images/menu7-h.jpg" width="30" height="198" /></div>
    <div class="content"><img src="images/menu-img-7.jpg" width="486" height="198" /></div>
</div>
</div>
<h1> 

Vertical Accordion
</h1>
<div id="accordion3" class="accordionWrapper" style="width:486px;">
<div class="set set1">
    <div class="title"><img src="images/menu1.jpg" width="198" height="29" /></div>
    <div class="content"><img src="images/menu-img-1.jpg" width="486" height="198" /></div>
</div>
<div class="set set2">
    <div class="title"><img src="images/menu2.jpg" width="198" height="29" /></div>
    <div class="content"><img src="images/menu-img-2.jpg" width="486" height="198" /></div>
</div>
<div class="set set3">
    <div class="title"><img src="images/menu3.jpg" width="198" height="29" /></div>

    <div class="content"><img src="images/menu-img-3.jpg" width="486" height="198" /></div>
</div>
<div class="set set4">

    <div class="title"><img src="images/menu4.jpg" width="198" height="29" /></div>
    <div class="content"><img src="images/menu-img-4.jpg" width="486" height="198" /><br />
</div>
</div>
<div class="set set5">
    <div class="title"><img src="images/menu5.jpg" width="198" height="29" /></div>
    <div class="content"><img src="images/menu-img-5.jpg" width="486" height="198" /></div>
</div>
<div class="set set6">

    <div class="title"><img src="images/menu6.jpg" width="198" height="29" /></div>
    <div class="content"><img src="images/menu-img-6.jpg" width="486" height="198" /></div>
</div>
<div class="set set7">
    <div class="title"><img src="images/menu7.jpg" width="198" height="29" /></div>
    <div class="content"><img src="images/menu-img-7.jpg" width="486" height="198" /></div>
</div>
</div>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
						   $("#accordionGiftLelo").msAccordion({defaultid:1});
						   $("#accordion1").msAccordion({defaultid:6, autodelay:4});
						   
						   $("#accordionNested").msAccordion({defaultid:2});
						   $("#accordionNestedChild").msAccordion({defaultid:2, vertical:true});
						   
						   $("#accordion3").msAccordion({vertical:true});
						   }
						   )
</script>
</body>
</html>

JS代码(jquery.msAccordion.js):

//menu Accordion//author:Marghoob Suleman//Date:05th Aug,2009//Version:1.0//web:www.giftlelo.com | www.marghoobsuleman.com;
	(function($){
	$.fn.msAccordion = function(options){
	options = $.extend({
	currentDiv:'1',previousDiv:'',vertical:false,defaultid:0,currentcounter:0,intervalid:0,autodelay:0,event:"click",alldivs_array:new Array()}
,options);
	$(this).addClass("accordionWrapper");
	$(this).css({
	overflow:"hidden"}
);
	//alert(this);
	var elementid = $(this).attr("id");
	var allDivs = this.children();
	if(options.autodelay>0){
	$("#"+ elementid +" > div").bind("mouseenter",function(){
	pause();
}
);
	$("#"+ elementid +" > div").bind("mouseleave",function(){
	startPlay();
}
);
}
//set idsallDivs.each(function(current){
	var iCurrent = current;
	var sTitleID = elementid+"_msTitle_"+(iCurrent);
	var sContentID = sTitleID+"_msContent_"+(iCurrent);
	var currentDiv = allDivs[iCurrent];
	var totalChild = currentDiv.childNodes.length;
	var titleDiv = $(currentDiv).find("div.title");
	titleDiv.attr("id",sTitleID);
	var contentDiv = $(currentDiv).find("div.content");
	contentDiv.attr("id",sContentID);
	options.alldivs_array.push(sTitleID);
	//$("#"+sTitleID).click(function(){
	openMe(sTitleID);
}
);
	$("#"+sTitleID).bind(options.event,function(){
	pause();
	openMe(sTitleID);
}
);
}
);
	//make verticalif(options.vertical){
	makeVertical();
}
;
	//open defaultopenMe(elementid+"_msTitle_"+options.defaultid);
	if(options.autodelay>0){
	startPlay();
}
;
	//alert(allDivs.length);
	function openMe(id){
	var sTitleID = id;
	var iCurrent = sTitleID.split("_")[sTitleID.split("_").length-1];
	options.currentcounter = iCurrent;
	var sContentID = id+"_msContent_"+iCurrent;
	if($("#"+sContentID).css("display")=="none"){
	if(options.previousDiv!=""){
	closeMe(options.previousDiv);
}
;
	if(options.vertical){
	$("#"+sContentID).slideDown("slow");
}
else{
	$("#"+sContentID).show("slow");
}
options.currentDiv = sContentID;
	options.previousDiv = options.currentDiv;
}
;
}
;
	function closeMe(div){
	if(options.vertical){
	$("#"+div).slideUp("slow");
}
else{
	$("#"+div).hide("slow");
}
;
}
;
	function makeVertical(){
	$("#"+elementid +" > div").css({
	display:"block",float:"none",clear:"both"}
);
	$("#"+elementid +" > div > div.title").css({
	display:"block",float:"none",clear:"both"}
);
	$("#"+elementid +" > div > div.content").css({
	clear:"both"}
);
}
;
	function startPlay(){
	options.intervalid = window.setInterval(play,options.autodelay*1000);
}
;
	function play(){
	var sTitleId = options.alldivs_array[options.currentcounter];
	openMe(sTitleId);
	options.currentcounter++;
	if(options.currentcounter==options.alldivs_array.length) options.currentcounter = 0;
}
;
	function pause(){
	window.clearInterval(options.intervalid);
}
;
}
}
)(jQuery);

CSS代码(accordion.css):

.accordionWrapper{display:inline-block;background-color:#fff;overflow:hidden;}
.accordionWrapper img{vertical-align:top;border:0;margin:0;padding:0}
.accordionWrapper div{display:inline;float:left;margin:auto;}
.accordionWrapper div.title{cursor:pointer;}
.accordionWrapper div.content{display:none;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
406.23 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
406.23 KB
立即下载
曹梦
了解
打赏作者 鼓励作者
Html Js 手拉琴特效
最新结算
股权转让协议意向书模板
类型: .docx 金额: CNY 2.23￥ 状态: 待结算 详细>
股权转让协议意向书模板
类型: .docx 金额: CNY 0.28￥ 状态: 待结算 详细>
CSS3图片向上3D翻转渐隐消失特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3图片向上3D翻转渐隐消失特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
.net c# 将金额转人名币大写金额
类型: .rar 金额: CNY 2.39￥ 状态: 待结算 详细>
.net c# 将金额转人名币大写金额
类型: .rar 金额: CNY 0.3￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 2.23￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 0.28￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 2.23￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 0.28￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章