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

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

林哲 2018-6-20 1 百度收录:未收录 1734

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修改)

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

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

#Emlog##Emlog美化#

免责声明:本文仅代表作者个人观点,与本网站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
赞赏作者
打赏作者 微信打赏
作者: 林哲 本文最后编辑于2018-6-20 04:15:56
林哲

一个草根站长,本站全部内容来源网络,有事联系QQ1420193311

作者的微博

发表评论

评论列表:

2018-06-21 00:41
好方法,现在很多网站都这么处理了