js伸缩性菜单
来源:互联网 发布:淘宝上便宜好用的口红 编辑:程序博客网 时间:2024/06/06 02:17
1.添加JS库
<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结构:
<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:
<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>
http://moofx.mad4milk.net/代码中的JS文件可以到该网站下载!
- js伸缩性菜单
- js菜单
- JS菜单
- 伸缩性文章
- ZooKeeper伸缩性
- 系统伸缩性
- ZooKeeper伸缩性
- ZooKeeper伸缩性
- JS常用菜单
- 树型导般菜单(js版)
- JS 三级联动菜单
- js菜单效果
- 右键菜单----js代码
- js二级联动菜单
- js实现弹出式菜单
- js树型菜单
- JS滑动菜单显示
- JS滑动菜单显示
- svn trunk branches tags 的用法
- 大话设计模式学习--简单工厂模式
- C++初学者指南 第十篇(8)
- Hadoop分布式文件系统
- framebuffer驱动全篇
- js伸缩性菜单
- Linux下cron定时执行Java程序
- 使用LoadVars实现Flash与服务器通信
- C++初学者指南 第十篇(9)
- 清楚 Visual Studio 上的 开始页面上的最近项目列表(转载)
- 美国人眼中的Chinglish--看看你说了几句?
- Myeclipse8.0集成jbpm3.2
- 黑客经验谈之黑客所应有的基本技能
- C++初学者指南 第十篇(10)