CSDN网站阅读更多：实现原理

一设计案例

现在很多网站都增加了阅读更多功能。以CSDN为例，分析其实现原理。

二设计原理

1 内容区的初始高度是固定的。

2 背景渐变的操作区，遮盖在内容区上面

3 点击按钮时，解除内容区的高度限制，同时移除操作区

三模拟实现

 1 <!DOCTYPE html>
 2 <html lang="en">
 3   <head>
 4     <meta charset="UTF-8" />
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7     <title>Document</title>
 8     <style type="text/css">
 9       .box {
10         position: relative;
11         width: 600px;
12       }
13       .box.partial {
14         height: 96px;
15         overflow: hidden;
16       }
17       .opts {
18         position: relative;
19         z-index: 10;
20         margin-top: -72px;
21         padding-top:72px;
22         background-image: -webkit-gradient(
23           linear,
24           left top,
25           left bottom,
26           from(rgba(255, 255, 255, 0)),
27           color-stop(70%, #fff)
28         );
29         background-image: linear-gradient(
30           -180deg,
31           rgba(255, 255, 255, 0) 0%,
32           #fff 70%
33         );
34       }
35     </style>
36   </head>
37   <body>
38     <!-- 内容区 -->
39     <div id="box" class="box partial">
40       iPhone在中国季度销量增长超过华为
41       最新的报告中指出，相比去年12月份，iPhone在国内的销量已经出现了明显逆转，而苹果还是中国3大智能手机厂商中（华为、小米和OPPO），唯一一家在3月份实现月度用户基数增长的公司，这与2018年3月份的情况截然不同。
42       截至今年3月底iPhone在中国的用户基数为20.9%，正在缩小与华为的领先优势，而苹果增长的趋势将一直持续到今年上半年（3月份iPhone在中国的出货量14个百分点，仅同比下滑6%，要知道今年2月份，iPhone在中国的出货量暴降了20%，是6年来最低水平。）。
43       为何销量突然提升？并非偶然
44       对于苹果来说，iPhone销量在中国市场突然提升并非偶然，因为从根本上来说，他们用降价刺激了消费者。3月份，苹果完成了对iPhone
45       XS和iPhone XS
46       Max的降价，当然这个操作依然是通过第三方渠道来完成，这样可以把对品牌的伤害降低到最小。
47     </div>
48 
49     <!-- 操作区 -->
50     <div id="opts" class="opts">
51       <button id="btn" class="btn">更多</button>
52     </div>
53 
54     <!-- 脚本 -->
55     <script>
56       document.getElementById("btn").addEventListener(
57         "click",
58         e => {
59           // 展开内容区
60           let box = document.getElementById("box");
61           box.classList.remove("partial");
62 
63           // 移除操作区
64           let opts = document.getElementById("opts");
65           document.body.removeChild(opts);
66         },
67         false
68       );
69     </script>
70   </body>
71 </html>