一 设计案例

现在很多网站都增加了阅读更多功能。以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. three.js的组合与合并，raycaster射线无法获取group

    1.组合 创建一个组非常简单,在组中添加子元素的效果是,你可以对组进行移动.缩放和变形,而所有的子对象都会受到影响.使用组的时候,你依然可以引用.修改每一个单独的几何体.但是,使用raycaster射 ...

  2. Java Lambda expression

    Lambda 表达式,也可称为闭包,它是推动 Java 8 发布的最重要新特性. Lambda 允许把函数作为一个方法的参数(函数作为参数传递进方法中). 使用 Lambda 表达式可以使代码变的更加 ...

  3. mysql 5.7 enable binlog

    0. precondition a) install mysql 5.7, for  detail please refer my blog post. 1. login mysql and chec ...

  4. 去除 ServiceStack.Redis 的6000次限制。

    方法一. 下载 https://github.com/ServiceStack/ServiceStack.Text 修改LicenseUtils.cs文件中的AssertValidUsage var ...

  5. 自己的mongodb的CRUD封装

    工具类:package Utils; import com.google.common.collect.Lists; import com.mongodb.MongoClient; import co ...

  6. RNN探索(2)之手写数字识别

    这篇博文不介绍基础的RNN理论知识,只是初步探索如何使用Tensorflow,之后会用笔推导RNN的公式和理论,现在时间紧迫所以先使用为主~~ import numpy as np import te ...

  7. 数组Array的API2

    数组的方法 arr.push() arr.unshift() arr.pop() arr.shift() arr.slice() arr.splice() arr.join() arr.find() ...

  8. [Unity优化]批处理01：Statistics窗口

    参考链接: https://docs.unity3d.com/Manual/RenderingStatistics.html unity版本:2018.3.8 新建一个场景,只保留Main Camer ...

  9. Java能不能通过代码干预Java垃圾回收

    1.不能通过Java代码干预Java垃圾回收. 2.system.gc是请求运行垃圾回收器,不一定真的运行了垃圾回收器. 3.Java的system.gc不受代码控制. 4.影响Java虚拟机垃圾回收 ...

  10. sqlserver2012 数据库差异备份恢复 记录

    sqlserver2012恢复过程: 先恢复全备份,再恢复差异,注意:勾选NoRecovery选项. 恢复完成后,出现: Sqlserver数据库 一直显示“正在还原…” 的状态. 引用:http:/ ...