以下是 jQuery手风琴特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>jQuery手风琴</title>
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/haccordion.css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js/ddsmoothmenu.js"></script>
<script type="text/javascript" src="js/jquery.galleria.js"></script>
<script type="text/javascript" src="js/galleria-init2.js"></script>
<script type="text/javascript" src="js/haccordion.js"></script>
<script type="text/javascript" src="js/common.js"></script>
</head>
<body onload="javascript:haccordion.expandli('hc1', 0)">
<div id="pagecontainer">
<!-- Outside Container -->
<div id="mainpage">
<!-- Outside Mainpage -->
<div id="gallerypageheader">
<!-- Header Start -->
<div id="smoothmenu1" class="ddsmoothmenu">
<!-- The Menu -->
<ul>
</ul>
</div>
<!-- Logo -->
<div id="logo">
<a href="#/?">
<img src="images/logo.png" alt="logo" /></a></div>
</div>
<!-- Close Header -->
<!-- Accordion Featured Block -->
<div id="hc1" class="haccordion">
<ul>
<li>
<div class="hpanel">
<!-- Image -->
<div class="hpanelimage">
<a href="#/?27.html" title="Ak92-Photoshop">
<img src="images/261442030.jpg" alt="Ak92-Photoshop" /></a>
</div>
<!-- Caption -->
<div class="hpanelcaption captionfade">
<a href="#/?27.html" title="Ak92-Photoshop">
阿萨在乱逛的时候发现的，超有个性，非常独特。用hjin的说法，就是看上去就有编缉的欲望。整个页面，采用了仿adobe
photoshop cs4的风格。需要小图……</a> </div>
</div>
</li>
<li>
<div class="hpanel">
<!-- Image -->
<div class="hpanelimage">
<a href="#/?5.html" title="M4-META">
<img src="images/2525671506.jpg" alt="M4-META" /></a>
</div>
<!-- Caption -->
<div class="hpanelcaption captionfade">
<a href="#/?5.html" title="M4-META">这个主题是M4精心制作的，本来是给我自已用的。但是，好的东西。要大家来分享嘛，所以，就放出来给大家了。使用中，比较麻烦。如果分类和独立页面与演示不一样，那还需要……</a>
</div>
</div>
</li>
<li>
<div class="hpanel">
<!-- Image -->
<div class="hpanelimage">
<a href="#/?10.html" title="iStudio for Martin">
<img src="images/1832747360.jpg" alt="iStudio for Martin" /></a>
</div>
<!-- Caption -->
<div class="hpanelcaption captionfade">
<a href="#/?10.html" title="iStudio for Martin">
码钉制作的新主题，灰色背景，仿苹果MAC界面，很优秀。整体页采用了淡灰色，菜单栏导航处，current是蓝色，LOGO设计也很独特，不可多得的模板之一。</a>
</div>
</div>
</li>
<li>
<div class="hpanel">
<!-- Image -->
<div class="hpanelimage">
<a href="#/?21.html" title="Ak92-MayaStyle">
<img src="images/3684684383.jpg" alt="Ak92-MayaStyle" /></a>
</div>
<!-- Caption -->
<div class="hpanelcaption captionfade">
<a href="#/?21.html" title="Ak92-MayaStyle">
玛雅（MAYA）文明是拉美大陆上神秘而辉煌的古代文明，在这里留下了高耸的金字塔神庙、庄严的宫殿和天文观象台，雕刻精美、含义深邃的记事石碑和建筑装饰雕刻，以及众多……</a>
</div>
</div>
</li>
</ul>
</div>
<!-- End of Featured Block --></div>
</div>
</body>
</html>
JS代码(common.js):
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
}
);
ddsmoothmenu.init({
mainmenuid:"smoothmenu1",//menu DIV idorientation:'h',//Horizontal or vertical menu:Set to "h" or "v"classname:'ddsmoothmenu',//class added to menu's outer DIV//customtheme:["#1c5a80","#18374a"],contentsource:"markup" //"markup" or ["container_id","path_to_menu_file"]}
)haccordion.setup({
accordionid:'hc1',paneldimensions:{
peekw:'50px',fullw:'786px',h:'430px'}
,selectedli:[-1,true],collapsecurrent:false}
)JS代码(haccordion.js):
/* Horizontal Accordion script* Created:Oct 27th,2009. This notice must stay intact for usage* Author:Dynamic Drive at http://www.dynamicdrive.com/* Visit http://www.dynamicdrive.com/ for full source code*/
var haccordion={
//customize loading message if accordion markup is fetched via Ajax:ajaxloadingmsg:'<div style="margin:1em;
font-weight:bold"><img src="/usr/themes/default/images/ajaxloadr.gif" style="vertical-align:middle" /></div>',accordioninfo:{
}
,//class that holds config information of each haccordion instanceexpandli:function(accordionid,targetli){
var config=haccordion.accordioninfo[accordionid]var $targetli=(typeof targetli=="number")? config.$targetlis.eq(targetli):(typeof targetli=="string")? jQuery('#'+targetli):jQuery(targetli)if (typeof config.$lastexpanded!="undefined") //targetli may be an index,ID string,or DOM reference to LIconfig.$lastexpanded.stop().animate({
width:config.paneldimensions.peekw}
,config.speed) //contract last opened content$targetli.stop().animate({
width:$targetli.data('hpaneloffsetw')}
,config.speed) //expand current contentconfig.$lastexpanded=$targetli}
,urlparamselect:function(accordionid){
var result=window.location.search.match(new RegExp(accordionid+"=(\\d+)","i")) //check for "?accordionid=index" in URLif (result!=null)result=parseInt(RegExp.$1)+"" //return value as string so 0 doesn't test for falsereturn result //returns null or index,where index is the desired selected hcontent index}
,getCookie:function(Name){
var re=new RegExp(Name+"=[^;
]+","i") //construct RE to search for target name/value pairif (document.cookie.match(re)) //if cookie foundreturn document.cookie.match(re)[0].split("=")[1] //return its valuereturn null}
,setCookie:function(name,value){
document.cookie = name + "=" + value + ";
path=/"}
,loadexternal:function($,config){
//function to fetch external page containing the entire accordion content markupvar $hcontainer=$('#'+config.ajaxsource.container).html(this.ajaxloadingmsg)$.ajax({
url:config.ajaxsource.path,//path to external contentasync:true,error:function(ajaxrequest){
$hcontainer.html('Error fetching content.<br />Server Response:'+ajaxrequest.responseText)}
,success:function(content){
$hcontainer.html(content)haccordion.init($,config)}
}
)}
,init:function($,config){
haccordion.accordioninfo[config.accordionid]=config //cache config info for this accordionvar $targetlis=$('#'+config.accordionid).find('ul:eq(0) > li') //find top level LIsconfig.$targetlis=$targetlisconfig.selectedli=config.selectedli || [] //set default selectedli optionconfig.speed=config.speed || "normal" //set default speed$targetlis.each(function(i){
var $target=$(this).data('pos',i) //give each li an index #$target.data('hpaneloffsetw',$target.find('.hpanel:eq(0)').outerWidth()) //get offset width of each .hpanel DIV (config.dimensions.fullw + any DIV padding)$target.mouseenter(function(){
haccordion.expandli(config.accordionid,this)config.$lastexpanded=$(this)}
)if (config.collapsecurrent){
//if previous content should be contracted when expanding current$target.mouseleave(function(){
$(this).stop().animate({
width:config.paneldimensions.peekw}
,config.speed) //contract previous content}
)}
}
) //end $targetlis.eachvar selectedli=haccordion.urlparamselect(config.accordionid) || ((config.selectedli[1] && haccordion.getCookie(config.accordionid))? parseInt(haccordion.getCookie(config.accordionid)):config.selectedli[0])selectedli=parseInt(selectedli)if (selectedli>=0 && selectedli<config.$targetlis.length){
//if selectedli index is within rangeconfig.$lastexpanded=$targetlis.eq(selectedli)config.$lastexpanded.css('width',config.$lastexpanded.data('hpaneloffsetw')) //expand selected li}
$(window).bind('unload',function(){
//clean up and persist on page unloadhaccordion.uninit($,config)}
) //end window.onunload}
,uninit:function($,config){
var $targetlis=config.$targetlisvar expandedliindex=-1 //index of expanded content to remember (-1 indicates non)$targetlis.each(function(){
var $target=$(this)$target.unbind()if ($target.width()==$target.data('hpaneloffsetw'))expandedliindex=$target.data('pos')}
)if (config.selectedli[1]==true) //enable persistence?haccordion.setCookie(config.accordionid,expandedliindex)}
,setup:function(config){
//Use JS to write out CSS that sets up initial dimensions of each LI,for JS enabled browsers onlydocument.write('<style type="text/css">\n')document.write('#'+config.accordionid+' li{
width:'+config.paneldimensions.peekw+';
\nheight:'+config.paneldimensions.h+';
\n}
\n')document.write('#'+config.accordionid+' li .hpanel{
width:'+config.paneldimensions.fullw+';
\nheight:'+config.paneldimensions.h+';
\n}
\n')document.write('<\/style>')jQuery(document).ready(function($){
//on Dom loadif (config.ajaxsource) //if config.ajaxsource option definedhaccordion.loadexternal($,config)elsehaccordion.init($,config)}
) //end DOM load}
}
CSS代码(haccordion.css):
/*Overall CSS for each Horizontal Accordion.Most settings should be kept as it.Customize each Accordion by styling each Accordion's ID attribute instead.*/
.haccordion{padding:0;}
.haccordion ul{margin:0;padding:0;list-style:none;overflow:hidden;/*leave as is*/
}
.haccordion li{margin:0;padding:0;display:block;/*leave as is*/
width:100%;/*For users with JS disabled:Width of each content*/
height:430px;/*For users with JS disabled:Height of each content*/
overflow:hidden;/*leave as is*/
float:left;/*leave as is*/
}
.haccordion li .hpanel{width:100%;/*For users with JS disabled:Width of each content*/
height:430px;/*For users with JS disabled:Height of each content*/
}
.hpanelimage{float:right;}
.hpanelcaption{margin-top:-100px;float:right;color:#fff;padding:15px;font-size:12px;line-height:18px;background:#111;width:500px;}
.hpanelcaption a{color:#fff;}
.hpanelcaption a:hover{text-decoration:none;}
/*CSS for example Accordion #hc1*/
#hc1{margin-top:10px;height:430px;overflow:hidden;margin-bottom:15px;padding:1px;border:1px solid #111;background:url(../images/ajax.gif) no-repeat 580px 200px;}
#hc1 li{margin:0;/*Spacing between each LI container*/
}
#hc1 li .hpanel img{width:786px;height:430px;}
#hc1 li .hpanel{padding:0;/*Padding inside each content*/
background:#111;}
/*CSS for example Accordion #hc2*/
#hc2 li{margin:0 0 0 0;/*Spacing between each LI container*/
border:0;}
#hc2 li .hpanel{padding:0;/*Padding inside each content*/
}
分享到QQ
分享到微博
微信扫一扫
