Dzwebs.Net

撰写电脑技术杂文十余年

jquery网页功能:阅读更多 阅读全文 展开 More等如何实现

Admin | 2020-12-25 13:10:02 | 被阅次数 | 908

温馨提示!

如果未能解决您的问题,请点击搜索;登陆可复制文章,点击登陆

  网页上常常会有这样的功能:我们在阅读文章的时候,通常会遇到文章下面出现“阅读更多 阅读全文 展开 More”等字样,一点击就会显示或展开更多的内容给访问者查看。如下图。


  这种功能如何实现呢?网上讲的很多,并且也会复杂,本人改良了一下,得出最简单的代码,下面拿出来与大家分析。

  一、简单的CSS

  .MyArticleContent{
            position: relative;
            height: 300px;
            overflow: hidden;/*设置文章容器高度,超出部分隐藏*/
        }
        .ReadAllArtilce-btn{
            position: relative;
            bottom: 0;
            height: 200px;
 text-align: center;
            background: linear-gradient(180deg,rgba(255,255,255,0),#fff);/*实现渐变效果,遮罩效果*/
            margin-top: -200px;

        }
        .ReadAllArtilce-btn a{
            text-decoration: none;
            color: chocolate;
            display: inline-block;
            margin-top: 180px;
        }

  二、网页用到的DIV

  <div class="MyArticleContent" id="MyArticleContent">
            <P>
               文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容
   文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容
   文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容
   文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容
   文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容
   文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容
   文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容
   文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容
   文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容
   文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容
   文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容
   文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容
            </P>
            <div class="ReadAllArtilce-btn" id="ReadAllArtilce">
<a onclick="showMoreArticle()"><strong>阅读全文</strong></a>
            </div>
        </div>

  三、借助Jquery

  使用Jquery的目的是用来点击“阅读全文”让该按钮隐藏并显示全文的。

  该Jquery在网页的Head区域进行引用,如:<script src="jquery-2.0.0.min.js">

  四、JS代码

  <script>
        function showMoreArticle() {
            $("#MyArticleContent").height("auto");//取消文字容器高度限制
            $("#ReadAllArtilce").hide();//隐藏查看更多按钮
        }
  </script>

  JS代码放在Body的最下面。


网站备案号:

网站备案号:滇ICP备11001339号-7

版权属性:

Copyright 2007-2021-forever Inc. all Rights Reserved.

联系方式:

Email:dzwebs@126.com QQ:83539231