一 设计案例

现在很多网站都增加了阅读更多功能。以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. dp练习--

    动态规划(DP)算法     动态规划是运筹学的一个分支,是求解决策过程最优化的数学方法.利用各个阶段之间的关系,逐个求解,最终求得全局最优解,需要确认原问题与子问题.动态规划状态.边界状态.边界状态 ...

  2. 在做MVC和WebApi写返回数据时，可以这样定义

    public class Messages { /// <summary> /// 返回包含是否成功以及消息字符结果 /// </summary> /// <param ...

  3. codeblock字体问题

    有的时候在codeblock中打下划线,会显示空格, 这个时候可以修改一下字体 settings->editor->editor settings最上面的fonts框中选择choose,然 ...

  4. JavaScript数组方法--filter、find、findIndex

    继续数组方法,今天应该到filter了. filter:filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素. 使用: var words = ['spray', 'lim ...

  5. eclipse安装中文语言包

    打开eclipse官网 https://www.eclipse.org/ 选择Projects 搜索框输入:Babel 点击搜索 选择Downloads 根据eclipse启动图画里的版本选择要下载的 ...

  6. JWT,oAuth和SSO的讨论

    JWT,oAuth和SSO的讨论 背景 Single Sign On有很多成熟的方案.基于Session的服务常使用缓存Session信息在一个缓存服务上(例如redis)以实现SSO,每个微服务使用 ...

  7. c语言中的利用函数实现交换两个字符，交换两个字符串

    c语言交换两个字符: 方法一:利用指针传址,效率比较高 void swap(int *a,int *b) { int temp; temp = *a; *a = *b; *b = temp } 方法二 ...

  8. VM下安装Windows 2008 R2服务器操作系统

    打开虚拟机,双击双击新的虚拟机. 2 硬件兼容性选择workstation10.点击下一步. 3 选择我以后安装操作系统.点击继续 4 选择Microsoft windows,版本为windows s ...

  9. JeecgBoot版本4月份新版即将发布，抢先体验。。

    JeecgBoot版本4月份新版即将发布,抢先体验.. 即将发布版本-更新日志:     1.代码生成器GUI工具     2.支持一对多代码生成器     3.支持按钮权限     4.支持数据权限 ...

  10. win10以管理员身份运行cmd方法

    win10以管理员身份运行cmd方法 win8win10以管理员身份运行cmd方法1.直接到 C:\Windows\System32 下面找cmd.exe 右键以管理员方式打开就可以了 2.按WIN+ ...