首页 > Web开发 > 详细

jQuery文本段落展开和折叠效果

时间:2014-01-16 08:35:43      阅读:974      评论:0      收藏:0      [点我收藏+]
bubuko.com,布布扣
 1 <!DOCTYPE html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 4 <title>jQuery文本段落展开和折叠效果</title>
 5 <style>
 6 
 7 #wrap{position: relative;padding: 10px;overflow: hidden;}
 8 #gradient{width: 100%;height: 35px;background: url() repeat-x;position: absolute;bottom: 0;left: 0;}
 9 
10 </style>
11 <script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
12 <script type="text/javascript">
13 $(function(){
14     var slideHeight = 75; // px
15     var defHeight = $(#wrap).height();
16     if(defHeight >= slideHeight){
17         $(#wrap).css(height , slideHeight + px);
18         $(#read-more).append(<a href="#">点击查看更多。。</a>);
19         $(#read-more a).click(function(){
20             var curHeight = $(#wrap).height();
21             if(curHeight == slideHeight){
22                 $(#wrap).animate({
23                   height: defHeight
24                 }, "normal");
25                 $(#read-more a).html(点击隐藏);
26                 $(#gradient).fadeOut();
27             }else{
28                 $(#wrap).animate({
29                   height: slideHeight
30                 }, "normal");
31                 $(#read-more a).html(点击查看更多。。);
32                 $(#gradient).fadeIn();
33             }
34             return false;
35         });        
36     }
37 });
38 </script>
39 </head>
40 <body>
41     <div id="container">
42         <h1>jQuery 控制段落文字展开折叠,点击查看更多的功能</h1>
43         <h2>About Billabong</h2>
44         <div id="wrap">
45             <div>
46                 <p>Gordon developed his own stitching technique, which made the garments more durable, cost effective and less labor intensive. He employed machinists, moved the operation into a factory, set up a distribution network and sponsored a team of renowned Australian surfers. The business thrived.</p>
47                 <p>Since those beginnings, Billabong has expanded its product range to infdsafdsafdasfdsafdsafdasfdasfdsafdafdsafdsafdasfdclude boardsport products such as wetsuits, watches, surfboards, snowboard outerwear and skateboarding apparel.fdasfdsafdsafdsaffffffffff啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊Gordon developed his own stitching technique, which made the garments more durable, cost effective and less labor intensive. He employed machinists, moved the operation into a factory, set up a distribution network and sponsored a team of renowned Australian surfers. The business thrived.</p>
48                 <p>Since those beginnings, Billabong has expanded its product range to infdsafdsafdasfdsafdsafdasfdasfdsafdafdsafdsafdasfdclude boardsport products such as wetsuits, watches, surfboards, snowboard outerwear and skateboarding apparel.fdasfdsafdsafdsaffffffffff啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
49             </div>
50             <div id="gradient"></div>
51         </div>
52         <div id="read-more"></div>
53     </div>
54     
55 </body>
56 </html>
bubuko.com,布布扣

jQuery文本段落展开和折叠效果

原文:http://www.cnblogs.com/shijiewutonghua/p/3517499.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!