给EMLOG文章页面加入阅读剩下内容的按钮

对于喜欢写长篇大论的博主来说，今天分享的教程确实有很大的用处，但对于平常的博主来说，本功能其实没有多大用处，甚至略显鸡肋，下面分享两个方法。

一、通过给文章添加div的方法

1、下载模板文件css文件，给文章div加入下面的css代码

overflow: hidden;

2、下载模板文件echo_log.php，在底部添加下面的代码

<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>

二、通过折叠的方式

1、下载模板文件css文件，添加下面的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>

2、下载模板文件echo_log.php，在文章div后面添加下面的代码

<div class="readall_box" > <div class="read_more_mask"></div> <a class="read_more_btn" target="_self">阅读全文</a> </div>

3、将下面的js代码写入模板文件echo_log.php中，并将js代码中所有的.art-content替换成自己的文章div的class或者id标签

<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>

三、注意事项

1、本教程中的第一个方法中使用到的js代码，需要按照自己文章div的class或id进行修改，因此博客志更推荐您使用第二种方法