給文章加入閱讀剩下內容按鈕

這個功能本身十分雞肋,但是為了頁面美觀還是有必要的

給文章加入閱讀剩下內容按鈕.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

以上操作完成之后就可以實現閱讀更多內容的按鈕

原文:https://www.youngxj.cn/504.html

轉載請注明出處 AE博客|墨淵 ? 給文章加入閱讀剩下內容按鈕

相關推薦

發表評論

路人甲

網友評論(0)