一 设计案例

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

二 设计原理

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

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

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

三 模拟实现

 <!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>Document</title>

     <style type="text/css">

       .box {

         position: relative;

         width: 600px;

       }

       .box.partial {

         height: 96px;

         overflow: hidden;

       }

       .opts {

         position: relative;

         z-index: 10;

         margin-top: -72px;

         padding-top:72px;

         background-image: -webkit-gradient(

           linear,

           left top,

           left bottom,

           from(rgba(255, 255, 255, 0)),

           color-stop(70%, #fff)

         );

         background-image: linear-gradient(

           -180deg,

           rgba(255, 255, 255, 0) 0%,

           #fff 70%

         );

       }

     </style>

   </head>

   <body>

     <!-- 内容区 -->

     <div id="box" class="box partial">

       iPhone在中国季度销量增长超过华为

       最新的报告中指出，相比去年12月份，iPhone在国内的销量已经出现了明显逆转，而苹果还是中国3大智能手机厂商中（华为、小米和OPPO），唯一一家在3月份实现月度用户基数增长的公司，这与2018年3月份的情况截然不同。

       截至今年3月底iPhone在中国的用户基数为20.9%，正在缩小与华为的领先优势，而苹果增长的趋势将一直持续到今年上半年（3月份iPhone在中国的出货量14个百分点，仅同比下滑6%，要知道今年2月份，iPhone在中国的出货量暴降了20%，是6年来最低水平。）。

       为何销量突然提升？并非偶然

       对于苹果来说，iPhone销量在中国市场突然提升并非偶然，因为从根本上来说，他们用降价刺激了消费者。3月份，苹果完成了对iPhone

       XS和iPhone XS

       Max的降价，当然这个操作依然是通过第三方渠道来完成，这样可以把对品牌的伤害降低到最小。

     </div>

     <!-- 操作区 -->

     <div id="opts" class="opts">

       <button id="btn" class="btn">更多</button>

     </div>

     <!-- 脚本 -->

     <script>

       document.getElementById("btn").addEventListener(

         "click",

         e => {

           // 展开内容区

           let box = document.getElementById("box");

           box.classList.remove("partial");

           // 移除操作区

           let opts = document.getElementById("opts");

           document.body.removeChild(opts);

         },

         false

       );

     </script>

   </body>

 </html>

CSDN网站阅读更多：实现原理的更多相关文章

  1. csdn阅读更多需要注册登录csdn

    csdn目前设置每日使用5次后必须登录才能看到阅读更多的内容,异常恶心.因此搜罗了方法去解决这个问题 方法一 打开想看的csdn后,在console里边执行以下代码: $("div.arti ...

  2. JS脚本实现CSDN免登陆免关闭广告插件自动展开“阅读更多”内容

    最近在CSDN查资料,总是弹出以下弹窗,然后就自动跳转到登录页面,蛋疼! 于是重新捣腾了一下,修改了原来的脚本,最新的脚本代码如下: 温馨提示:在打开CSDN页面后立刻执行以下脚本即可免登陆免关闭广告 ...

  3. PHP网站安装程序的原理及代码

    原文:PHP网站安装程序的原理及代码 原理: 其实PHP程序的安装原理无非就是将数据库结构和内容导入到相应的数据库中,从这个过程中重新配置连接数据库的参数和文件,为了保证不被别人恶意使用安装文件,当安 ...

  4. 删除CSDN点击“阅读更多”按钮跳转到登录界面的功能

    manifest.json { "manifest_version": 2, "name": "Helper2", "versio ...

  5. csdn阅读更多自动展开插件

    点击获取 当然也可以自己写脚本.写js.

  6. 【网摘自CSDN网站】当文本内容过多，展开更多 （css控制,）

    <div class="more"><p class="btn">显示全部内容</p></div> .more ...

  7. python3 源码阅读-虚拟机运行原理

    阅读源码版本python 3.8.3 参考书籍<<Python源码剖析>> 参考书籍<<Python学习手册 第4版>> 官网文档目录介绍 Doc目录主 ...

  8. Java爬虫实践--爬取CSDN网站图片为例

    实现的效果,自动在工程下创建Pictures文件夹,根据网站URL爬取图片,层层获取.在Pictures下以网站的层级URL命名文件夹,用来装该层URL下的图片.同时将文件名,路径,URL插入数据库, ...

  9. 【生成对抗网络学习 其三】BiGAN论文阅读笔记及其原理理解

    参考资料: 1.https://github.com/dragen1860/TensorFlow-2.x-Tutorials 2.<Adversarial Feature Learning> ...

随机推荐

  1. python SSH客户端的交互式和非交互方式

    使用python中有一个paramiko模块来实现python SSH客户端,与SSH服务器交互时,需要注意有交互式和非交互式的区别. 只执行单条命令,之后就断开链接,可以使用非交互方式.执行多条命令 ...

  2. bitmap--Bitmap详解与Bitmap的内存优化

    一.Bitmap: Bitmap是Android系统中的图像处理的最重要类之一.用它可以获取图像文件信息,进行图像剪切.旋转.缩放等操作,并可以指定格式保存图像文件. 常用方法: public voi ...

  3. vs2008 点击"转到定义"为什么是"未定义符号"

    1.有可能是VA未安装正确,但是我遇到的情况是我的VA安装正确的. 2.我的解决办法:删掉工程的.ncb文件后重新编译即可:以前也遇到过断点打不上去的事情,也是删掉.ncb后重新编译就可以了. 附带一 ...

  4. Chapter07 链表(下)：如何轻松学出正确的链表代码？

    技巧一:理解指针或引用的含义 技巧二:指针丢失和内存泄漏 技巧三:利用哨兵简化实现难度 技巧四:重点留意边界条件处理 如果链表未空时,代码是否能够正常运行 如果链表只包含一个节点时,代码能否正常运行 ...

  5. Navicat操作SQL server 2008R2文件.bak文件还原

    项目操作过程中,利用Navicat操作SQL Server2008R2数据备份,结果发现数据丢失了很多,不得不先对数据丢失部分进行差异对比,然后再重新输入. 1.利用Navicat导出的数据格式为sq ...

  6. (12)SecureCRT中文乱码问题

    Options -- Session Options -- Appearance --Character encoding:选择UTF-8

  7. 嵌入式linux——说明（零）

    之前就学习过嵌入式linux,但是那时候并没有完全投入,学习的也不科学系统,没有笔记,也没有自己写很多的代码来练习,所以到现在是基本归零了,现在比较有富裕的时间来系统的学习,从今天开始要克服每一个学习 ...

  8. spring配置文件注入到静态变量

    spring配置注入到静态文件代码如下: package com.test.oss; import org.springframework.beans.factory.annotation.Value ...

  9. assert (boxes[:, 2] >= boxes[:, 0]).all()报错

    根据报错信息,打印以下内容: 代码如下: for i in xrange(num_images): #print ('in append_flipped==================',self ...

  10. list<T>升序、降序

    List<test> list = new List<test> (); var result = list.OrderByDescending(p => p.we).T ...