js实现内容超出一定高度后折叠 点击展开收起

前端 思享 82浏览
摘要:
200px以外的部分内容被隐藏,底部显示蒙版图层和查看全文按钮。类似的效果请见csdn的博客内容页。#渐变{宽度:100%;高度:50px位置:绝对;底部:0;左:0;背景:-moz-linear-gradient;背景:-WebKit-gradient;背景:-o-线性-梯度;}

内容超出200px部分隐藏,同时底部显示遮罩层、查看全文按钮。

点击显示全文,按钮变为“收起”。

相似效果可看csdn的博客内容页。

内容折叠点击查看全文

实现代码

<style>
.thread_article{position: relative;overflow: hidden;}
#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));}
#read-more{padding: 5px;background: #fff;color: #333;}
#read-more a{padding-right: 22px;text-decoration: none;color:#0f88eb;}
#read-more a: hover{color: #000;}
.text-center{text-align:center;}
</style>

<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

<div class="thread_article">
-------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略--------------
<div id="gradient"></div>
</div>
<div id="read-more" class="text-center"></div>
<script type="text/javascript">
$(function(){
var slideHeight = 200; // px
var defHeight = $('.thread_article').height();
if(defHeight >= slideHeight){  
  $('.thread_article').css('height' , slideHeight + 'px');
  $('#read-more').append('<a href="#">查看全文 <i class="fa fa-angle-down"></i></a>');
  $('#read-more a').click(function(){
   var curHeight = $('.thread_article').height();
   if(curHeight == slideHeight){
   $('.thread_article').animate({
     height: defHeight
    }, "normal");
    $('#read-more a').html('收起 <i class="fa fa-angle-up"></i>');
    $('#gradient').fadeOut();
   }else{
    $('.thread_article').animate({
     height: slideHeight
    }, "normal");
    $('#read-more a').html('查看全文 <i class="fa fa-angle-down"></i>');
    $('#gradient').fadeIn();
   }
   return false;
  });  
}
});
</script>

推荐阅读

7ghost:可替换内容的PHP反向代理程序

错误报告在PHP的未来版本中,与类同名的PHP方法将不再是构造函数...

JavaScript实现选项卡切换效果

我一直比较喜欢可以切换的标签页,也就是说在同一个位置可以容纳多个容器,也就是可以容纳更多的内容,没有冗余。我认为这是一个不影响用户体验的可扩展SEO项。网上看如何实现,转载参考。//指定DOM元素类名的方法。单击它以添加活动的...

纯css实现轮播和点击切换效果(无JS)

接下来,根据需要设置ul的长度。这里,首先制作三个切换窗口,因此ul的宽度被设置为容器宽度的300%,li是每次切换时显示的子元素,宽度被设置为所显示容器的100%。所有多余的部分都被隐藏起来,这样我们就可以通过修改ul的margin-left属性的......