一 设计案例

现在很多网站都增加了阅读更多功能。以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. 如何破解QQ空间相册密码访问权限2019方法

    今天小编给大家介绍一下最新的QQ空间相册破解方法,是2019年最新方法,本方法来自互联网,下面开始方法教程 教程之前我们需要下载软件,地址我发在下方 软件切图 1.首先我们打开软件,然后在“操作界面” ...

  2. C语言数据结构基础学习笔记——动态查找表

    动态查找表包括二叉排序树和二叉平衡树. 二叉排序树:也叫二叉搜索树,它或是一颗空树,或是具有以下性质的二叉树: ①若左子树不空,则左子树上所有结点的值均小于它的根结点的值: ②若右子树不空,则右子树上 ...

  3. C#,ASP.NET简单的MD5加密,解密

    简单的MD5加密 首先要有一个加解密的规则  就是key 代码如下 // 创建Key public string GenerateKey() { DESCryptoServiceProvider de ...

  4. 转：APP开发浅谈-Fiddler抓包详解

    原文地址:http://www.luoxudong.com/?p=306 Fiddler抓包工具在APP开发过程中使用非常频繁,对开发者理解HTTP网络传输原理以及分析定位网络方面的问题非常有帮助.今 ...

  5. java+Selenium+TestNg搭建自动化测试架构(3)实现POM（page+Object+modal）

    1.Page Object是Selenium自动化测试项目开发实践的最佳设计模式之一,通过对界面元素的封装减少冗余代码,同时在后期维护中,若元素定位发生变化,只需要调整页面元素封装的代码,提高测试用例 ...

  6. 修改GIT密码

    修改GIT本地密码 控制面板->用户账户和家庭安全->凭证管理器->普通凭证:git:hhtp://*****

  7. 使用requests+BeautifulSoup爬取龙族V小说

    这几天想看龙族最新版本,但是搜索半天发现 没有网站提供 下载, 我又只想下载后离线阅读(写代码已经很费眼睛了).无奈只有自己 爬取了. 这里记录一下,以后想看时,直接运行脚本 下载小说. 这里是从   ...

  8. php.ini文件修改完重启

    killall php-pfm启动php-pfm 一般 service php-fpm restart

  9. 树莓派3使用openSUSE Ports 42.3 驱动GPIO注意事项

    安装好opensuse 42.3以后,安装wiringPi库. 由于/proc/cpuinfo文件缺少“Hardware”信息,导致出现如下错误: Oops: Unable to determine ...

  10. Java数组操作十大方法 (转)

    定义一个Java数组 String[] aArray = new String[5]; String[] bArray = {"a","b","c&q ...