一 设计案例

现在很多网站都增加了阅读更多功能。以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. C/C++中的函数指针的使用与总结

    概要: 函数指针介绍 typedef简化函数指针的定义 指向函数的指针的初始化和赋值 通过指针调用函数 函数指针形参 返回指向函数的指针 指向重载函数的指针 参考<C++ Primer> ...

  2. CentOS_6.5配置iptables防火墙策略

    ###############配置filter表防火墙############### #清除预设表filter中的所有规则链的规则iptables -F #清除预设表filter中使用者自定链中的规则 ...

  3. bs4源码

    Beautiful源码: """Beautiful Soup Elixir and Tonic "The Screen-Scraper's Friend&quo ...

  4. k8s 命令补全

    安装:apt-get install bash-completion source <(kubectl completion bash) echo "source <(kubec ...

  5. 五分钟搞定Go.js

    五分钟搞定Go.js  1.基于html5~因为Go.js是一个依赖于HTML5特性的JavaScript库,所以需要确保您的页面声明它是一个HTML5文档,当然需要加载库 <!DOCTYPE ...

  6. （Python基础）文件操作

    对文件操作流程 打开文件,得到文件句柄并赋值给一个变量 通过句柄对文件进行操作 关闭文件 现有文件如下 命名为7 years Once I was seven years old my momma t ...

  7. run in thread

    def run_in_thread(runnable, is_daemon=True): server_thread = Thread(target=runnable) server_thread.s ...

  8. Java Native调用C方法

    1.通过JNI生成C调用的头文件:Java源码: import java.io.File; public class Test { static { System.load("D:" ...

  9. SpringMVC参数绑定总结

    springMvc作用:    a) 接收请求中的参数    b) 将处理好的数据返回给页面参数绑定(就是从请求中接收参数):    a) 默认支持的类型: request, response, se ...

  10. js：一些基础

    JavaScript 基础(一)   JavaScript的引入方式 直接编写 <!DOCTYPE html> <html lang="en"> <h ...