文谷首页 | 业界传真 | 网络技术 | 服务器 | 数据库 | 存储技术 | 系统安全 | 无线技术 | Cisco | .Net | Windows | Linux | Unix | Java
电子商务 | 网站工程 | 网页设计 | 平面设计 | 多媒体 | 编程语言 | Oracle | MSSQL | Photoshop | ASP | PHP | 实用技巧 | 进程查询 | 文谷论坛
网站工程
 规划发展   网页美工   标记语言   网页编程   Web服务器   广告攻略   开发常识   趋势研究   网站维护   网站数据库   网页设计工具
 论坛
您现在的位置: IT文谷 >> 网站工程 >> 网页编程 >> JavaScript >> 文章正文
[效果]JS折叠菜单[效果]JS折叠菜单2006-8-11 23:59:47[效果]JS折叠菜单2006-8-11 23:59:47[效果]JS折叠菜单
[效果]JS折叠菜单
[效果]JS折叠菜单[效果]JS折叠菜单2006-8-11 23:59:47[效果]JS折叠菜单2006-8-11 23:59:47[效果]JS折叠菜单
[效果]JS折叠菜单[效果]JS折叠菜单2006-8-11 23:59:47[效果]JS折叠菜单2006-8-11 23:59:47[效果]JS折叠菜单

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折叠菜单2006-8-11 23:59:47[效果]JS折叠菜单2006-8-11 23:59:47[效果]JS折叠菜单
  • 上一篇文章:

  • 下一篇文章:
  • 进入论坛讨论

    相关文章
    进阶:学习As2.0与AS3.0的尴尬
    Flash特效制作常用的源代码大放送
    Flash AS3 相对于AS2 新的特性和改动
    用Flash影片剪辑复制做“鼠标跟随”特效
    Flash常用ActionScript控制语句基本用法
    自己动手制作手机Flash主题动画
    浅释Flash ActionScript代码优化原则
    将数码照片做成自动放映的Flash
    浅释ActionScript的代码优化
    FLASH制作网站过程详细规划
    让手机也“闪”起来!Flash Lite 2 新功能介绍
    精彩实例详解:用Flash实现北京奥运倒计时
    热门文章最新推荐

    版权与免责声明:
    ① 本网转载其他媒体稿件是为传播更多的信息,此类稿件不代表本网观点,版权归原作者所有,本网不承担此类稿件侵权行为的连带责任。
    ② 本站原创文章,转载时请注明出自文谷及作者姓名
    ③在本网BBS上发表言论者,文责自负。
    ④如您因版权等问题需要与本网联络,请在30日内联系 。
    [效果]JS折叠菜单[效果]JS折叠菜单2006-8-11 23:59:47[效果]JS折叠菜单2006-8-11 23:59:47[效果]JS折叠菜单
    [效果]JS折叠菜单[效果]JS折叠菜单2006-8-11 23:59:47[效果]JS折叠菜单2006-8-11 23:59:47[效果]JS折叠菜单

    全站热点
    最新推荐
    关于文谷 | 联系文谷 | 免责声明 | 文谷论坛
    Tel: 0577-65690019      E-mail: ichenjian@gmail.com    MSN:ichenjian@hotmail.com    QQ:2911194
    Copyright © 2004-2008 wengu.com 文谷 All Rights Reserved
    浙ICP备05000327号