高度折叠jQuery+CSS 半开折叠效果源码

来源：互联网发布：淘宝网京剧服装青衣编辑：程序博客网时间：2024/05/01 17:21

题记：写这篇博客要主是加深自己对高度折叠的认识和总结实现算法时的一些验经和训教，如果有错误请指出，万分感谢。

一个项目想用jQuery做一个可以半折叠的DIV元素，苦于jQueryUI中accordion没有供提相干的方法，就自己写了个。前以用使jQueryUI的时候现发可以用的accordion全体折叠起来了，没办法设置折叠的最小高度。

代码品质很低，希望老鸟可以点指点指。

下图是果效示展，可以借由jQuery的函数开展压缩

高度和折叠

 1 //author: hlhr 2 //require: Jquery1.4 and above 3 function animate_toggle_height(maxh,minh,maxo,mino,element,speed) {//这个是纵向的，参数释解：大最高度，最小高度，大最透明度，最小透明度，元素，画动度速 4     if (element.css("height")==minh.toString().concat("px")){//如果是最小高度就开展 5         element.animate({ 6             height:maxh, 7             opacity:maxo 8         },{queue: false},speed); 9         return "Fold"10     }11     if (element.css("height")==maxh.toString().concat("px")){//如果是大最高度就折叠12         $(this).html("");13         element.animate({14             height:minh,15             opacity:mino16         },{queue: false},speed);17         return "Read more";18     }19 }20 21 function animate_toggle_width(maxw,minw,maxo,mino,element,speed) {22     if (element.css("width")==minw.toString().concat("px")){23         element.animate({24             width:maxw,25             opacity:maxo26         },{queue: false},speed);27         return "Fold"28     }29     if (element.css("width")==maxw.toString().concat("px")){30         element.animate({31             width:minw,32             opacity:mino33         },{queue: false},speed);34         return "Read more";35     }36 }

每日一道理
心是一棵树，爱与希望的根须扎在土里，智慧与情感的枝叶招展在蓝天下。无论是岁月的风雨扑面而来，还是滚滚尘埃遮蔽了翠叶青枝，它总是静默地矗立在那里等待，并接受一切来临，既不倨傲，也不卑微。
　　心是一棵树，一个个故事被年轮携载；一回回驿动与飞鸟相约；一次次碰撞使它绵密柔韧；一幕幕经历造就了它博广的胸怀。心是一棵树，独木不成林。因此，树与树既独立又相联，心与心既相异又相亲。

 1 <html> 2     <head> 3         <script src="jquery-1.9.1.min.js"></script><!--须要jquery库--> 4         <script src="jqslider.js"></script><!--链接上文的js库--> 5         <style> 6             body{margin: 0 auto; text-align:center;} 7             .slide{font-size:20px; overflow: hidden; width: 500px; } 8             #content{margin:0 auto; width: 500px;} 9             .viewbutton{position:relative; text-align: right;}10         </style>11     </head>12     13     <body>14         <fieldset id="content">15             <div class="slide">16             <a class="viewbutton" href="#">17                 Read more18             </a>19                 <p>slide!</p>20                 <p>slide!</p>21                 <p>slide!</p>22                 <p>slide!</p>23                 <p>slide!</p>24             </div>25         </fieldset>26         <p />27 28         <fieldset id="content">29             <div class="slide">30             <a class="viewbutton" href="#">31                 Read more32             </a>33                 <p>slide!</p>34                 <p>slide!</p>35                 <p>slide!</p>36                 <p>slide!</p>37                 <p>slide!</p>38             </div>39         </fieldset>40         41         42         <script type="text/javascript">43             var max_h=300;44             var min_h=100;45             //var max_w=500;46             //var min_w=10;47             var max_o=1;48             var min_o=0.3;49             $(".slide").css({opacity:min_o});//设置初始的透明度50             $(".slide").css({height:min_h});//设置初始的高度51             $(".viewbutton").click(function(){//这里只是用调了纵向开展，也可以用调向横开展52                 $(this).html(animate_toggle_height(max_h,min_h,max_o,min_o,$(this).parent(),500));//自动识别为viewbutton的上一级行进画动53             });54         </script>55     </body>56 </html>

viewbutton的层级可自行修改，但要注意画动的目标是什么。我写的viewbutton会对它上一级的那个div做画动，所以就用不把选择器写得过于庞杂了。

文章结束给大家分享下程序员的一些笑话语录：程序员的愿望
　　有一天一个程序员见到了上帝.上帝: 小伙子,我可以满足你一个愿望.程序员: 我希望中国国家队能再次打进世界杯.
　　上帝: 这个啊!这个不好办啊,你还说下一个吧!
　　程序员: 那好!我的下一个愿望是每天都能休息6个小时以上.
　　上帝: 还是让中国国家打进世界杯.