js库出自:http://moofx.mad4milk.net/(Moofx 超轻量级javascrip效果类库)
先点击这里看下效果吧
用法:
1.添加JS库
CODE: <script src="prototype.lite.js" type="text/javascript"></script> <script src="moo.fx.js" type="text/javascript"></script> <script src="moo.fx.pack.js" type="text/javascript"></script>
2.建立xhtml结构:
CODE: <div id="container"> <H1 class="title"><A href="javascript:void(0)">(1)这里放标题</H1> <div class="content"> <p>(1)这里放内容</p> </div> <H1 class="title"><A href="javascript:void(0)">(2)这里放标题</H1> <div class="content"> <p>(2)这里放内容</p> </div><H1 class="title"><A href="javascript:void(0)">(3)这里放标题</H1> <div class="content"> <p>(3)这里放内容</p> </div> </div>
3.调用JS:
CODE:
<script type="text/javascript"> //定义contents 组数为所有将要显示的内容 var contents = document.getElementsByClassName('content'); //定义contents 组数为所有标题,也是可点击展开的按钮 var toggles = document.getElementsByClassName('title');
//调用moofx JS库 var myAccordion = new fx.Accordion( toggles, contents, {opacity: true, duration: 400} //opacity确定是否有alpha透明变化,duration确定动作所有时间 ); myAccordion.showThisHideOpen(contents[0]); //默认打开第一个内容 </script>
完成. 简单而且效果不错吧 如果还要界面好看点,自已定义下CSS吧
下载
出处:蓝色理想
责任编辑:moby
◎进入论坛网页制作、网站综合版块参加讨论
|