您现在的位置是：网站首页> 编程资料编程资料

纯 CSS 实现点击展开阅读全文功能JS和CSS3实现点击展开页面动画特效

2023-10-08 362人已围观

简介这篇文章主要介绍了纯 CSS 实现【点击展开阅读全文】功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

记要

开发文章展示列表界面时, 想通过展示部分文章头内容达到基本信息概览的需求即可, 并展示 【点击展开阅读全文】 的按钮以获取详情内容。

参考了文章 caibaojian.com/css-tonggle… 的纯 CSS 的想法, 但文章描述的内容适用于单篇文章的效果, 而在使用

标签生成表数据的情况下并不友好, 所以在此基础上进行了相对应的优化, 具体代码如下：

 [id^="contTab"] { display: none; } .content-more { display: none; } [id^="contTab"]:checked ~ #content { max-height: 95px; overflow: hidden; } [id^="contTab"]:checked ~ .content-more { display: block; position: relative; text-align: center; } [id^="contTab"]:checked ~ .content-more .gradient { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#fff)); background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), #fff); background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0), #fff); height: 80px; position: absolute; left: 0; top: -79px; width: 100%; } [id^="contTab"]:checked ~ .content-more .readmore { display: inline-block; background: #319a1717; color: #0014ff9e; width: 300px; height: 30px; border-radius: 32px; line-height: 32px; font-size: 14px; cursor: pointer; text-indent: 0; }

当然了, 这儿附上一段 JS 的代码：

 function inner(response) { for (var val of response.data) { document.getElementById('content-ul').innerHTML += '' + '' + '' + val.title + '
' + '' + val.author_name + ' / ' + layui.util.toDateString(val.update, "yyyy-MM-dd HH:mm:ss") + '
' + '' + '' + val.content + '
' + '
点 击 查 阅 全 文
' + '
' } }

说明

改善的方式是将绑定的标签 ID 属性使用动态的方式生成并绑定, 其次使用 CSS 选择器, 使用的是模糊匹配的方式, 不局限于某个具体的 ID 选择器。

源码

该代码片段是应用于 M&OAS 项目中, 你可以点击这里查看相关的代码信息, 获得更加完整的代码。

PS：如果你进去了居然发现没有相关的代码块, 不要惊慌, 可能我还没有上传到 GITHU 上, 多多包涵 QAQ ~