杨小杰博客提供免费教程下载和网站搭建技术教程,主要分享和发布网站源码,致力创造一个高质量网络资源教程的分享平台

给文章加入阅读剩下内容按钮

Young小杰2018-6-19 15:55网站搭建(5)1291查询中……小标签: 网站搭建教程 emlog 技术教程 原创

这个功能本身十分鸡肋,但是为了页面美观还是有必要的

给文章加入阅读剩下内容按钮.gif

教程开始

1、首先给文章div加入css


overflow: hidden;


2、然后加入一段按钮和js代码


<div class="rest-butt-content" id="rest-butt-content" style="display:none;"><div id="rest-butt" onclick="rest_butt();" style="margin: 1rem auto;line-height: 2.3rem;display: block;width: 8rem;border-radius: 5px;border: 1px solid #6f8ec5;text-align: center;cursor: pointer;color: #6f8ec5;">阅读余下内容</div></div>
    <script>
      if($('.art-content').height()>600){
        // 如果内容页高度大于600
        $('.art-content').height('600');
        $('#rest-butt-content').show();
        // 控制内容页的高度到600
        // 且按钮为显示状态
      }else{
        // 否则不出现阅读更多的按钮
        $('#rest-butt-content').hide();
      }
      function rest_butt(){
        $('.art-content').height('100%');
        $("#rest-butt-content").remove();
      }
    </script>
上面的代码加到文章内容结束的后面即可,切勿在一个div内。(具体使用到的class请自己按照自己的class/id修改)


可以参考下面的截图进行添加代码

QQ截图20180619160520.png

以上操作完成之后就可以实现阅读更多内容的按钮

#下面是网络上寻找的更优的ui和算法

首先是html按钮


<div class="readall_box" >
  <div class="read_more_mask"></div>
  <a class="read_more_btn" target="_self">阅读全文</a>
</div>
这个html按钮应该加在文章div之后


下面是JavaScript算法代码


<script type="text/javascript">
  $(function(){
    var widHeight = $(window).height();
    var artHeight = $('.art-content').height();
    if(artHeight>(widHeight*1.5)){
      $('.art-content').height(widHeight*1.5-285).css({'overflow':'hidden'});
      var article_show = true;
      $('.read_more_btn').on('click',bindRead_more);
    }else{
      article_show = true;
      $('.readall_box').hide().addClass('readall_box_nobg');
    }
    function bindRead_more(){
      if(!article_show){
        $('.art-content').height(widHeight*1.5).css({'overflow':'hidden'});
        $('.readall_box').show().removeClass('readall_box_nobg');
        article_show = true;
      }else{
        $('.art-content').height("").css({'overflow':'hidden'});
        $('.readall_box').show().addClass('readall_box_nobg');
        $('.readall_box').hide().addClass('readall_box_nobg');
        article_show = false;
      }
    }
  })
</script>

需要把所有的.art-content替换成你自己的文章div的class或者id标签

下面是css样式代码

<style type="text/css">
* {padding: 0; margin: 0; font-family: 'Microsoft Yahei';}
.readall_box {position: relative;z-index: 9999;padding: 0 0 25px;margin-top: -200px;text-align: center;}
.readall_box .read_more_mask {height: 200px;background: -moz-linear-gradient(bottom,rgba(255,255,255,0.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,0.1),rgba(255,255,255,0))}
.read_more_btn{cursor:pointer;font-size: 16px;color: #de686d;background: #fff;border-radius: 4px;border: 1px solid #de686d;line-height: 30px;padding:5px 10px;}
.read_more_btn:hover{background:#de686d;color:#fff;}
</style>
ps:大功告成

效果图

阅读全文.png



评论:

龙行博客 Google Chrome 67.0.3396.87 非主流操作系统 2018-06-27 14:06
不错的文章,下次再来对方不想跟你说话并向你丢了一朵小黄花回复了(献花)
Rabbit Google Chrome 55.0.2883.87 非主流操作系统 2018-06-27 10:44
你把钱借给了你的朋友,那么他一定会记得你,在他下一次缺钱时。打卡成功,现在时间:10点44分记得每天坚持打卡哦!
叶九秋 Google Chrome 63.0.3239.132 Windows 7 2018-06-23 17:20
运动后,你会惊喜地发现,自己只是从肥胖变成壮。打卡成功,现在时间:17点16分记得每天坚持打卡哦! 没有人会关心你付出过多少发奋,撑得累不累,摔的痛不痛,他们只会看你最后站在什么位置,然后羡慕嫉妒恨
Young小杰 Google Chrome 61.0.3163.128 Linux 2018-06-20 19:29
学而不思则罔,思而不学则殆。不思不学成网贷。
晓超云博客 Google Chrome 56.0.2924.90 非主流操作系统 2018-06-19 16:34
很实用哦 感谢分享

发表评论: