题记:写这篇博客要主是加深自己对高度折叠的认识和总结实现算法时的一些验经和训教,如果有错误请指出,万分感谢。
一个项目想用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:mino 16 },{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:maxo 26 },{queue: false},speed); 27 return "Fold" 28 } 29 if (element.css("width")==maxw.toString().concat("px")){ 30 element.animate({ 31 width:minw, 32 opacity:mino 33 },{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 more 18 </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 more 32 </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>
文章结束给大家分享下程序员的一些笑话语录: 程序员的愿望
有一天一个程序员见到了上帝.上帝: 小伙子,我可以满足你一个愿望.程序员: 我希望中国国家队能再次打进世界杯.
上帝: 这个啊!这个不好办啊,你还说下一个吧!
程序员: 那好!我的下一个愿望是每天都能休息6个小时以上.
上帝: 还是让中国国家打进世界杯.