[Javascript] jq 内容超出一定高度后折叠 点击展开收起

[复制链接]
123757cunekhek0eeehq10.jpg
<div class="thread_article">
内容省略一万字
<div id="gradient"></div>
</div>
<div id="read-more" class="text-center"></div>
  1.     <style>
  2.     .thread_article{position: relative;overflow: hidden;}
  3.     #gradient{width: 100%;height:50px;position: absolute;bottom: 0;left: 0;background: -moz-linear-gradient(bottom,rgba(255,255,255,.1),rgba(255,255,255,0));background: -webkit-gradient(linear,0 top,0 bottom,from(rgba(255,255,255,0)),to(#fff));background: -o-linear-gradient(bottom,rgba(255,255,255,.1),rgba(255,255,255,0));}
  4.     #read-more{padding: 5px;background: #fff;color: #333;}
  5.     #read-more a{padding-right: 22px;text-decoration: none;color:#0f88eb;}
  6.     #read-more a: hover{color: #000;}
  7.     .text-center{text-align:center;}
  8.     </style>
  9.     <script type="text/javascript">
  10.     $(function(){
  11.     var slideHeight = 200; // px
  12.     var defHeight = $('.thread_article').height();
  13.     if(defHeight >= slideHeight){  
  14.       $('.thread_article').css('height' , slideHeight + 'px');
  15.       $('#read-more').append('<a href="#">查看全文 <i class="fa fa-angle-down"></i></a>');
  16.       $('#read-more a').click(function(){
  17.        var curHeight = $('.thread_article').height();
  18.        if(curHeight == slideHeight){
  19.        $('.thread_article').animate({
  20.          height: defHeight
  21.         }, "normal");
  22.         $('#read-more a').html('收起 <i class="fa fa-angle-up"></i>');
  23.         $('#gradient').fadeOut();
  24.        }else{
  25.         $('.thread_article').animate({
  26.          height: slideHeight
  27.         }, "normal");
  28.         $('#read-more a').html('查看全文 <i class="fa fa-angle-down"></i>');
  29.         $('#gradient').fadeIn();
  30.        }
  31.        return false;
  32.       });  
  33.     }
  34.     });
  35.     </script>
复制代码
内容超出200px部分隐藏,同时底部显示遮罩层、查看全文按钮。点击显示全文,按钮变为“收起”。
没有做示例,相似效果可看csdn的博客内容页。
回复

使用道具 举报

Copyright   ©2015-2016  大糖网  ( 浙ICP备17038000号-1 )

大糖网是站长们一起交流成长的平台,这里可以找到海量、优质精品的源码模板等建站资源