css实现“展开阅读全文”功能-孔雀鱼博客

css实现“展开阅读全文”功能

发表于：2019-11-26 21:50
阅读(2682)

标签：展开阅读全文 css

摘要最近发现很多博客网站，资讯网站喜欢把资讯博文，内容等这些大文本的信息在页面显示的时候都会有个“展开阅读全文”的按钮，点击这个按钮即可展开显示所有的内容，不然一开始就显示那么长的篇幅相对来说既不美观，又对用户体验不好。现在就让我来仿照这类网站实现一个“展开阅读全文”功能。这里主要用到的前端技术是html+jquery+css，只做展开功能，没做收起功能（收起功能没必要吧，谁会去收起呀？？？）。

废话不多说，直接上代码，代码有注释说明，这个功能相对来说还是挺简单的 ~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>展开阅读全文</title>
    <style>
        /* 容器 */
        .content {
            overflow: hidden;
            position: relative; /* 用于子元素定位 */
        }
        /* 展开阅读全文 */
        div.wanne_read_more {
            display: none;
            left: 0;
            right: 0;
            bottom: 0;
            height: 100px;
            position: absolute; /* 相对父元素定位 */
            text-align: center;
            background-image: linear-gradient(-180deg,rgba(255,255,255,0) 0%,#fff 70%);
        }
        /* 展开阅读全文按钮 */
        div.wanne_read_more a {
            display: inline-block;
            color: #333;
            margin-top: 75px;
            text-decoration: none;
        }
        /* 向下箭头 */
        div.wanne_read_more a .down_arrow {
            display: inline-block;
            width: 8px; 
            height: 8px;
            border-right: 2px solid #ca0c16; 
            border-bottom: 2px solid #ca0c16;
            transform: rotate(45deg); /* 顺时针旋转45° */
            margin-bottom: 3px;
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <div class="content">
        <h3 id="h3-1-"><a name="1. 程序中的面向对象" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1. 程序中的面向对象</h3>
        <p>在目前的软件开发领域中有两种主流的开发方法：结构化开发方法和面向对象开发方法。早起啊的编程语言如：C、Basic、Pascal等都是结构化编程语言；随着软件开发技术的逐渐发展，人们发现面向对象的方式可以提供更好的可重用性、可扩展性和可维护性，于是催生了大量的面向对象的编程语言，如C++、Java、C#和Ruby（一个非常厉害的大佬写的）等。</p>
        <p>结构化程序设计方法主张按功能来分析系统需求，其主要原则可概括为自顶向下、逐步求精、模块化等（是不是和平时工作当中的设计模式很像呢？）。结构化程序设计首先采用结构化分析（Structured Analysis, SA）方法对系统进行需求分析，然后使用结构化设计（Structured Design, SD）方法对系统进行概要设计、详细设计，最后采用结构化编程（Structured Program, SP）方法来实现系统。使用这种方式可以较好地保证软件系统的开发进度和质量。</p>
        <p>结构化程序设计里的最小的程序单元是函数（不是方法哦），每个函数都负责完成一个功能，用于接收一些输入数据，函数对这些输入数据进行处理，处理完后输出另一些数据。整个软件系统就是由这一个个函数所组成，其中作为程序入口的函数被称为主函数，主函数依次调用其他普通函数，普通函数之间依次调用，从而完成整个软件系统的功能。如下图：</p>
        <p>可以看出结构化程序设计采用的是自顶向下的设计方式，在设计阶段就需要考虑好各个模块应该分解成哪些子模块，每个子模块又如何分解成哪些更小的模块等等，直到将模块都细分成一个一个函数。</p>
        <p>每个函数都是具有输入、输出的子系统，函数的输入数据包括函数形参、全局变量和常量等，函数的输出数据包括函数返回值以及传出参数等。结构化程序设计方式主要有如下两个局限性：</p>
        <pre class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><code><span class="pun">设计不够直观，与人类的思维习惯不一致。采用结构化程序分析、设计时，开发者需要将客观世界模型分解成一个一个的功能，每个功能用来完成一定的数据处理。</span></code></li><li class="L1"><code><span class="pun">适应性较差，可扩展性不强。由于结构化设计采用自定向下的设计方式，所以当用户的需求发生改变，或需要修改现有的实现方式时，都需要自顶向下地修改模块结构，这种方式的维护成本相当高。（是不是和工作中碰到的似曾相识呢？）</span></code></li></ol></pre>
        <p>任何简单或复杂的算法都可以由三种基本结构组合而成，分别是：顺序结构、选择结构和循环结构。这三种结构被称为程序设计的三种基本结构，也是结构化程序设计必须采用的结构。</p>
        <div class="wanne_read_more">
            <a href="javascript:void(0);" onclick="readMore()">展开阅读全文<span class="down_arrow"></span></a>
        </div>
    </div>
</body>
<!-- 注意：这里需要依赖jquery，如果不想用jq，下面的代码可以换成javascript的也可以 -->
<script src="js/jquery.min.js"></script>
<script>
$(function(){
    // 这里我是判断如果内容高度超过200px才隐藏剩余部分，具体要限制多高你可以自定义
    if ($('.content').height() > 200) {
        console.log("实际高度：" + $('.content').height() + "px");
        // 只显示200px预览高度
        $(".content").css("height", "200px");
        $(".wanne_read_more").show();
    }
});
function readMore() {
    // 显示所有内容
    $(".content").css("height", "auto");
    $(".wanne_read_more").hide();
}   
</script>
</html>

总体来说，代码不多，实现这一功能还是挺简单的，如果不对的地方欢迎指出~O(∩_∩)O哈哈~

最后鼓励我一下吧，请我喝杯奶茶~

欢迎打赏

展开阅读全文

上一篇：Java基础知识之多态

下一篇：谷歌浏览器的默认弹出框简单介绍

css实现“展开阅读全文”功能

相关推荐

mac安装subversion，并使用svn命令检出服务器上的代码库项目

Java如何获取泛型类T的Class

springboot项目事务报错：Transaction synchronization is not active

mysql应该如何在where语句中添加if语句进行条件判断？where if 语句应该如何使用

关于websocket多节点分布式问题的解决方案

mac如何把文件压缩成tar、zip以及如何解压tar、zip？

openjdk和jdk有什么区别，应该如何选择？

如果git仓库发生变更，IDEA如何直接修改git远程仓库地址？

微信公众号自定义菜单报错：no permission to use weapp in menu rid:xxxxxxx

Java如何使用stream流对List列表数据进行自定义排序

微信企业付款到零钱报错：此请求可能存在风险，已被微信拦截

springboot项目使用@Transactional注解如何避免长事务问题

css实现“展开阅读全文”功能

关于编程中面向对象的理解，什么是面向对象

我的linux操作命令总结，记录常用linux操作命令