前端实现“查看更多”效果

讲干货，不啰嗦，有时候文案文字较多，用户进入页面时先隐藏一部分，有“查看更多”按钮，用户点击展示全部文案，以下是具体实现：

最终效果：

具体实现：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><title>查看更多</title>
</head>
<body><div class="main"><div class="contain" id="textcontain"><P>阿萨德记录卡决定是否考虑房价拉水电费就看见阿弗莱克士大夫家看来是打发时间登飞来峰骄傲的看法杰卡斯两地分居卡斯柯老大哥工行卡里发生打架阿斯利康的积分卡拉斯激发开始代理费阿贾克斯房贷辣椒水两地分居阿斯顿福建高考合格哈卡司法局大啊佳世客东方丽景阿斯蒂芬两个号拉丝粉按甲方的快速拉设计公开课辣椒粉单身快乐阿达撒说过发的说法噶经济的方式卡里的首付款离开垃圾发的空间里规划开发的规划爱上发达水电费噶地方爱的嘎啊哈哈公司的发生埃及高科技阿里山风景奥克兰市附近阿萨德六块腹肌赶紧啊加快发啦时代峰峻奥克兰市附近案件开发及爱看的宫颈癌禄口街道法拉第设计费拉三季度福利卡世纪东方卡死了都放假快乐复健科就爱看的更加疯狂地老师</P><div class="open-btn" id="btncontain"><a onclick="showMore()">查看更多</a></div></div></div><script>// 点击显示更多按钮function showMore() {$("#textcontain").height("auto");//取消文字容器高度限制
            $("#btncontain").hide();//隐藏查看更多按钮
        }</script><style>.main{width: 100%;}.contain{width: 20%;position: relative;margin: 0 auto;height: 200px;overflow: hidden;/*设置文案容器高度，超出部分隐藏*/text-align: center;}.open-btn{position: absolute;width: 100%;bottom: 0;height: 80px;background: linear-gradient(180deg,rgba(255,255,255,0),#fff);/*实现渐变效果，遮罩效果*/}.open-btn a{text-decoration: none;color: chocolate;display: inline-block;margin-top: 60px;}</style>
</body>
</html>

步骤1：设置文字容器的高度，超出部分隐藏

步骤2：设置查看更多按钮层，绝对定位，至于文字层底部

步骤3：设置按钮层线性渐变，实现遮罩效果

步骤4：按钮添加点击事件，点击时取消文字层高度限制，并隐藏查看更多按钮

欢迎评论交流！

转载于:https://www.cnblogs.com/wwlstc/p/11307575.html

前端实现“查看更多”效果相关推荐

element el-dropdown使用下拉菜单实现查看更多的效果
2023.2.1今天我学习了如何使用el-dropdown下拉菜单组件来实现查看更多的效果. 效果: js代码如下: <el-dropdown&g ...
微信小程序开发笔记3——文字的查看更多的效果
博客更新地址啦-,欢迎访问:https://jerryyuanj.github.io/blog 我们知道,当一大段文字显示在一个页面且其不是作为最主要内容展示的时候,通常只会显示前几行,如果用户想要看 ...
微信小程序——收起和查看更多功能
大概的需求就是默认只显示2条,点击[查看更多]显示全部,点击[收起]还原. 实现的方法千万种.我来讲一下我的实现思路: 1.先判断列表的长度,如果小于3就不要[查看更多]这个按钮了. 2.根据索引的大 ...
公众号滑动图代码_如何实现微信公众号文章“滑动查看更多”
喜欢我,就请点击上方蓝字添加关注吧! 方法一:微信编辑器自带的"插入代码"功能首先,写一段文字,然后选中文字,选择"插入代码"功能,完成微信编辑器插入代码功 ...
apiCloud实现加载更多效果，基本完美~
apiCloud实现加载更多效果 1.接口支持,加入参数page. $page = $this->_request('page','trim','1'); $pagesize = 10; // ...
“查看更多”功能，较完美的实现
"查看更多"功能,较完美的实现需求: 文本过多时隐藏文本,用省略号代替,省略号后面有"查看更多"的按钮. 点击"查看更多"后展开所有文本, ...
css 实现图片左右滑动查看的效果
其实除了除了轮播图的那种图片效果外,图片滑动查看的效果在网站中引用也是很多的,特别是在移动端,pc端的也有就是我们是通过鼠标点击滑动的效果我们先来看下效果吧这样的效果其实没必要用到js 直 ...
非常漂亮的Web前端波形点击效果
非常漂亮的Web前端波形点击效果介绍一种Web前端波形点击效果,第一次发文,大佬勿喷. 我的博客介绍 Waves 这需要 Waves ,但是作者早在2018年就停止了对他的更新. 官网:Waves ...
h5+vue页面下滑查看更多页面触底+页面滑动
h5页面触底,不足一屏触发滑动超过一屏触发触底效果解决页面大屏正好一屏,小屏超过一屏页面下滑查看更多的问题解决方法1 超过一屏监听滚动触底触发小于或等于一屏监听触摸上滑触发 data ...

前端实现“查看更多”效果

前端实现“查看更多”效果相关推荐

最新文章

热门文章