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吧
下载
分享到:
相关推荐
折叠菜单效果 js 折叠菜单 js折叠菜单 没有多余代码,纯粹的菜单折叠效果!
js可折叠菜单,原创,效果不错。可折叠菜单可折叠菜单
简单的Javascript折叠菜单,很简单使用的
JavaScript折叠菜单比。
使用js 折叠菜单的方法 教给大家一个用js制作的折叠菜单 希望大家能够喜欢
js折叠菜单.后台左侧菜单 亲测可用。 经典的后台折叠菜单,类似Qq效果。 找了好久,绝对可用
本例是JS+CSS的折叠式菜单,几年前刚学JS的时候写的了,我还是菜鸟的时候写的,希望对其他的菜鸟有所帮助,能用就用吧。
很漂亮的一个折叠菜单效果,效果也很不错。
js 折叠菜单,竖向的
经典js折叠菜单 源码揭秘 经典js折叠菜单 源码揭秘 经典js折叠菜单 源码揭秘
网页左侧栏JS折叠菜单,可伸缩展开菜单项目,Windows XP menus,菜单前带图标,国外菜单设计作品,带动态渐变效果,示例效果截图如上图所示,兼容火狐/IE8 /Chrome等浏览器。
js特效 js光标感应折叠菜单 折叠菜单
简单易用的折叠菜单,支持多级,HTML行内无脚本
搜狐视频记录片列表展示,折叠菜单效果。js原生态代码,适合新手学习和使用
<SCRIPT src="images/tree_naviIndex.js" type=text/javascript> <style> #mainLeft { FONT-SIZE: 12px; FLOAT: left; WIDTH: 218px; HEIGHT: auto; BACKGROUND-COLOR: #f2f6fb;padding:10px 0px 10px 5px;margin:...
漂亮的JavaScript仿QQ多级折叠菜单。
网站后台页面左侧js折叠菜单代码
手风琴折叠菜单效果!
支持响应式手机端的JS手风琴折叠导航菜单特效,很不错的导航菜单,可用于手机网站导航菜单, JS特效是响应式设计,自适应PC、触屏,效果还是很不错的,值得使用。