大量折叠效果：酷站+免费下载+简单教程 | Javascript | 前端观察

前端观察 • 11年前扫码分享

您的位置：首页 > Javascript, Resource > 大量折叠效果：酷站+免费下载+简单教程

大量折叠效果：酷站+免费下载+简单教程
神飞发表于 02. Feb, 2009, 分类: Javascript, Resource , 2 条评论 »
标签：下载 & 免费 & 折叠 & 教程 & 酷站

本文中，我们将探索如何使用JavaScript折叠在网站中添加更多的动态效果。这里我们推荐一些最好的折叠网站实例并分享一些折叠技术、技巧、代码下载和教程方面的资源。
使用折叠效果的网站:

折叠效果资源:

演示 – 下载

演示 – 下载

演示|下载

演示|下载

演示|下载

演示|下载

演示|下载

演示|下载
折叠效果教程:
使用prototype 和scriptaculous创建一个简单移动的折叠效果

JavaScript和CSS折叠菜单效果教程

作者: 神飞
爱好前端设计与开发，崇尚一目了然的设计。现居深圳，就职于腾讯ISUX团队 Follow me on twitter @qianduan。
如果你喜欢本文，欢迎订阅本站以获得本站最新内容。
您或许也会喜欢：
国外25个最佳免费矢量图片下载网站收集
免费：10个漂亮的css导航菜单下载
12个免费的高质量梦幻笔刷下载
40套漂亮的免费图标下载
CSS3系列教程:简介
【酷站】12月份收集的10个最佳网站
2012年度最新免费web开发设计资源荟萃
2009年一月Wordpress免费模板推荐
6个非常漂亮的PSD和XHTML模板
2010年最新的100个免费HTML模板

2 个评论

牙牙学语发表于Feb 6, 2009 at 15:10
谢谢介绍分享，学习去~~~
很喜欢这个网站，已订阅。
回复

Mulberry Outlet 发表于Feb 20, 2014 at 23:55
Computing Glossary for the Letter P
GHD Hair Straightener
A hard dri Mulberry UK For Sale ve can be split to be used by multiple operating systems, or, simply for separate and independent storage.
PC Card (PCMCIA)
PCMCIA stands for Personal Computer Memory Card Internation Mulberry Handbags UK al Association. Roughly credit card sized, it is an expansion
回复

发表评论

昵称 (必填)
EMail (必填) (不会被泄露)
个人网站
<http://www.qianduan.nettextarea> <http://www.qianduan.netdiv> <div > <input name="submit" type="submit" tabindex="8" value="提交" http://www.qianduan.net>取消回复<http://www.qianduan.neta> <input type='hidden' name='comment_post_ID' value='3937' http://www.qianduan.net> <input type='hidden' name='comment_parent' value='0' http://www.qianduan.net> <http://www.qianduan.netdiv> <p style="display: none;"><input type="hidden" name="akismet_comment_nonce" value="f1cbbe0d25" http://www.qianduan.net><http://www.qianduan.netp> <http://www.qianduan.netform> <http://www.qianduan.netdiv> <http://www.qianduan.netdiv> <http://www.qianduan.netdiv> <div > <p><img src="http:http://www.qianduan.nethttp://www.qianduan.netfeeds2.feedburner.comhttp://www.qianduan.net~fchttp://www.qianduan.netqianduannet?bg=99CCFF&fg=444444&anim=1" height="26" width="88" style="border:0" alt="" http://www.qianduan.net><http://www.qianduan.neta><http://www.qianduan.netp> <h3>微信上关注我们<http://www.qianduan.neth3> <div ><p><img src="http:http://www.qianduan.nethttp://www.qianduan.netimg.qianduan.nethttp://www.qianduan.netuploadshttp://www.qianduan.netadhttp://www.qianduan.netqianduan_weixin.jpg" http://www.qianduan.net><br http://www.qianduan.net> 请扫描上面的二维码<br http://www.qianduan.net>或者在微信中搜索"iqianduan"添加好友<br http://www.qianduan.net> <br http://www.qianduan.net> 推荐微信机器人高级版<http://www.qianduan.neta><http://www.qianduan.netp> <http://www.qianduan.netdiv> <h3>热门文章<http://www.qianduan.neth3><ul > <li>推荐CSS库: 更佳网站可读性项目<http://www.qianduan.neta> <span ><http://www.qianduan.netspan><http://www.qianduan.netli> <li>50个高端大气上档次的管理后台界面模板<http://www.qianduan.neta> <span ><http://www.qianduan.netspan><http://www.qianduan.netli> <li>DNSPod招募前后端开发工程师<http://www.qianduan.neta> <span ><http://www.qianduan.netspan><http://www.qianduan.netli> <li>关于浮动的前世今生<http://www.qianduan.neta> <span ><http://www.qianduan.netspan><http://www.qianduan.netli> <li>CSS3 Region：基于HTML和CSS3的富页面布局<http://www.qianduan.neta> <span ><http://www.qianduan.netspan><http://www.qianduan.netli> <li>高性能 CSS3 动画<http://www.qianduan.neta> <span ><http://www.qianduan.netspan><http://www.qianduan.netli> <li>大量折叠效果：酷站+免费下载+简单教程<http://www.qianduan.neta> <span ><http://www.qianduan.netspan><http://www.qianduan.netli> <li>Chrome extension 升级到 manifest version 2 的问题<http://www.qianduan.neta> <span ><http://www.qianduan.netspan><http://www.qianduan.netli> <li>CSS Prism：你在CSS中用了多少种<a class='sowmlink' id='2' onmouseout='Fhidden()' onmouseover='Fpop(this)' target=_blank href='http://sowm.cn/channel/2.html'>颜色</a>？<http://www.qianduan.neta> <span ><http://www.qianduan.netspan><http://www.qianduan.netli> <li>前端观察第八期：CSS裸体日<http://www.qianduan.neta> <span ><http://www.qianduan.netspan><http://www.qianduan.netli> <li>微信团队UI组招募前端重构师<http://www.qianduan.neta> <span ><http://www.qianduan.netspan><http://www.qianduan.netli> <li>Zen Coding: 一种快速编写HTMLhttp://www.qianduan.netCSS代码的方法<http://www.qianduan.neta> <span ><http://www.qianduan.netspan><http://www.qianduan.netli> <li>CSS实现垂直居中的5种方法<http://www.qianduan.neta> <span ><http://www.qianduan.netspan><http://www.qianduan.netli> <li>-webkit-filter是神马？<http://www.qianduan.neta> <span ><http://www.qianduan.netspan><http://www.qianduan.netli> <li>理解CSS3线性渐变<http://www.qianduan.neta> <span ><http://www.qianduan.netspan><http://www.qianduan.netli> <li>一些必不可少的Sublime Text 2插件<http://www.qianduan.neta> <span ><http://www.qianduan.netspan><http://www.qianduan.netli> <li>LESS介绍及其与Sass的差异<http://www.qianduan.neta> <span ><http://www.qianduan.netspan><http://www.qianduan.netli> <li>【校园招聘】腾讯ISUX招募前端开发实习生<http://www.qianduan.neta> <span ><http://www.qianduan.netspan><http://www.qianduan.netli> <li>CSS3 icon font完全指南<http://www.qianduan.neta> <span ><http://www.qianduan.netspan><http://www.qianduan.netli> <li>haslayout综合<http://www.qianduan.neta> <span ><http://www.qianduan.netspan><http://www.qianduan.netli> <http://www.qianduan.netul> <h3>合作网站<http://www.qianduan.neth3> <ul > <li>GitCafe<http://www.qianduan.neta><http://www.qianduan.netli> <li>信息无障碍产品联盟<http://www.qianduan.neta><http://www.qianduan.netli> <li>前端界<http://www.qianduan.neta><http://www.qianduan.netli> <li>Linode VPS<http://www.qianduan.neta><http://www.qianduan.netli> <li>腾讯AlloyTeam<http://www.qianduan.neta><http://www.qianduan.netli> <li>Web 标准化交流会<http://www.qianduan.neta><http://www.qianduan.netli> <http://www.qianduan.netul> <h3>友情链接<http://www.qianduan.neth3> <ul > <li>笨笨剥壳<http://www.qianduan.neta><http://www.qianduan.netli> <li>米随随s5s5<http://www.qianduan.neta><http://www.qianduan.netli> <li>我爱水煮鱼<http://www.qianduan.neta><http://www.qianduan.netli> <li>大猫の意淫网志<http://www.qianduan.neta><http://www.qianduan.netli> <li>堂主<http://www.qianduan.neta><http://www.qianduan.netli> <li>芒果<http://www.qianduan.neta><http://www.qianduan.netli> <li>裁纸刀下<http://www.qianduan.neta><http://www.qianduan.netli> <li>飘飘的生活空间<http://www.qianduan.neta><http://www.qianduan.netli> <li>黄老湿<http://www.qianduan.neta><http://www.qianduan.netli> <li>进步博客<http://www.qianduan.neta><http://www.qianduan.netli> <li>软件开发网<http://www.qianduan.neta><http://www.qianduan.netli> <li>觉唯前端<http://www.qianduan.neta><http://www.qianduan.netli> <li>启良工作室<http://www.qianduan.neta><http://www.qianduan.netli> <li>前端博客导航<http://www.qianduan.neta><http://www.qianduan.netli> <li>IE浏览器<http://www.qianduan.neta><http://www.qianduan.netli> <li>poor<http://www.qianduan.neta><http://www.qianduan.netli> <li>GBin1<http://www.qianduan.neta><http://www.qianduan.netli> <li>GaoWhen高H温<http://www.qianduan.neta><http://www.qianduan.netli> <li>CSS HOUSE<http://www.qianduan.neta><http://www.qianduan.netli> <li>Smallni's blog<http://www.qianduan.neta><http://www.qianduan.netli> <li>suta<http://www.qianduan.neta><http://www.qianduan.netli> <li>WhyIDC 双线全能空间<http://www.qianduan.neta><http://www.qianduan.netli> <li>中文最佳网站设计<http://www.qianduan.neta><http://www.qianduan.netli> <li>WEB前端开发<http://www.qianduan.neta><http://www.qianduan.netli> <li>V2EX<http://www.qianduan.neta><http://www.qianduan.netli> <li>Time Machine<http://www.qianduan.neta><http://www.qianduan.netli> <li>99CSS<http://www.qianduan.neta><http://www.qianduan.netli> <http://www.qianduan.netul> <h3>Meta<http://www.qianduan.neth3> <ul> <li>Log in<http://www.qianduan.neta><http://www.qianduan.netli> <li>Entries RSS<http://www.qianduan.netabbr><http://www.qianduan.neta><http://www.qianduan.netli> <li>Comments RSS<http://www.qianduan.netabbr><http://www.qianduan.neta><http://www.qianduan.netli> <li>WordPress.org<http://www.qianduan.neta><http://www.qianduan.netli> <http://www.qianduan.netul> <http://www.qianduan.netdiv> <http://www.qianduan.netdiv><http://www.qianduan.netdiv><http://www.qianduan.netdiv></div> <section class="am-panel am-panel-default"> <header class="am-panel-hd"> <h3 class="am-panel-title">随意打赏</h3> </header> <div class="am-panel-bd"> <center><div id="cyReward" role="cylabs" data-use="reward"></div> </center> </div> </section> </article> <div class="am_news_list_all_center" > <ul class="am-list" > <li class="am-g am-list-item-desced am_list_li" data-am-collapse="{parent: '#accordion', target: '#do-not-say-1'}"> <center> 评论 </center> </li> </ul> <div id="do-not-say-1" class="am-panel-collapse am-collapse" > <ul class="am-list"> <li class="am-g am-list-item-desced am_list_li">  <div id="uyan_frame"></div> </li> </ul> </div> </div> <footer class="am_footer"> <div class="yindao"> <p>高效读科技，用关键词过滤资讯，等你加入</p> <a href="http://www.kejilie.com/unread.html" target="_blank" id="yindaolink" rel="nofollow"> 马上加入 </a> </div> <div class="yindao-hr"></div> <div class="am_footer_con" > <div class="am_footer_don"> <dt><img src="/img/logom.png" alt="科技猎"></dt> <dd>专注科技资讯挖掘，通过关键词过滤科技资讯，提高阅读效率10倍以上。网站定位极少数高效能人士，精准快速定位资讯，大大提高阅读效率。 </div> </div> <div class="so-footerlink"> <p> <a href="http://www.kejilie.com/about.html" title="科技猎" rel="nofollow" >关于我们</a> <a href="http://www.kejilie.com/contact.html" title="联系我们" rel="nofollow">联系我们</a> <a href="http://www.kejilie.com/joinus.html" title="加入我们" rel="nofollow">加入我们</a> <a href="http://www.kejilie.com/links.html" title="友情链接" rel="nofollow">友情链接</a>  <a href="http://www.kejilie.com/longword.html" title="最新TAG" rel="nofollow" >最新TAG</a> </p> </div> <div class="am_info_line"> CopyRight©2012-2019 科技猎 keji<span>L</span>ie.com 京公网安备 11010602030041号 <a href="https://beian.miit.gov.cn" target=_blank>京ICP备09085575号-7</a></div> </footer> <a target="_blank" onclick="_czc.push(['_trackEvent','用户调查','右下角']);" href="http://cn.mikecrm.com/amttlxP" style="position:fixed;z-index:999;right:15px;bottom: 70px;display: inline-block;width: 20px;border-radius: 5px;color:white;font-size:14px;line-height:17px;background: #2476CE;box-shadow: 0 0 5px #666;word-wrap: break-word;padding: 10px 1px;border: 2px solid white;">提交建议</a> <div data-am-widget="gotop" class="am-gotop am-gotop-fixed am-active"> <a href="#top" title="回到顶部" class="am-icon-btn am-icon-arrow-up" rel="nofollow"></a> </div>  <div id="so-share" onmouseout='sharehidden()' onmouseover='stopTime();' style="display: none;position: absolute;top: 50%;left: 50%;" class="share-popover"> <span class="arrow"></span> <div class="share"> <a href="#" onclick="share(this)" title="分享到新浪微博" data-share="weibo" class="share-btn s-weibo"></a> <a href="#" onclick="share(this)" title="分享到腾讯微博" data-share="tencent" class="share-btn s-tcweibo"></a> <a href="#" onclick="share(this)" title="分享到QQ空间" data-share="qzone" class="share-btn s-qzone"></a> <a href="#" onclick="share(this)" title="分享到人人网" data-share="renren" class="share-btn s-renren"></a> </div> </div>  <div id="shoucangtishi" class="am-badge am-badge-warning am-text-lg am-round" style="display: none;position:absolute;z-index:100;top:50%;left:50%;"> </div>  <div class="am-modal am-modal-alert" tabindex="-1" id="weixinbox"> <div class="am-modal-dialog"> <div class="am-modal-hd">微信扫一扫，分享给好友吧。</div> <div class="am-modal-bd" id="weixinpic" > </div> <div class="am-modal-footer"> <span class="am-modal-btn">关闭</span> </div> </div> </div>  <script src="http://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script> <script type="text/javascript">var jQuery=$;</script>  <script src="http://cdn.bootcss.com/amazeui/2.7.0/js/amazeui.min.js"></script> <script type="text/javascript" src="/js/prompt.js?v=1.1"></script> <script type="text/javascript" src="/js/app.js?v=1.7"></script> <script>var _hmt = _hmt || [];(function() { var hm = document.createElement("script"); hm.src = "//hm.baidu.com/hm.js?123b569b6ae27e29fadbfdb2c1f43901"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();</script> <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1260590285'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "w.cnzz.com/q_stat.php%3Fid%3D1260590285' type='text/javascript'%3E%3C/script%3E"));</script> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> <script> (function(){ var src = (document.location.protocol == "http:") ? "http://js.passport.qihucdn.com/11.0.1.js?4054411330fc00b0202d43f36579d12c":"https://jspassport.ssl.qhimg.com/11.0.1.js?4054411330fc00b0202d43f36579d12c"; document.write('<script src="' + src + '" id="sozz"><\/script>'); })(); </script>  <script> $('#yindaolink').click(function(){ zhuge.track("底部引导猎物"); }); </script> <script type="text/javascript" charset="utf-8" src="https://changyan.sohu.com/js/changyan.labs.https.js?appid=cytgHGfGU"></script>  <script type="text/javascript" src="http://v2.uyan.cc/code/uyan.js?uid=1836051"></script> <script type="text/javascript"> function Fpop(a){ } function Fhidden(){} zhuge.track("非第一次访问内容页"); $('#zhuge_guangaoyindao').click(function(){ zhuge.track("广告引导"); }); $('.zhuge_yanshenyuedu').click(function(){ zhuge.track("延伸阅读"); }); </script> </body> </html>