Js实现点击查看全文(类似今日头条、知乎日报效果)
2017-07-26 00:43
501 查看
这篇文章主要为大家详细介绍了原生JS+css仿QQ今日头条、知乎日报点击查看全文的效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下.
移动端demo展示 王者荣耀攻略网
需要设置过最大高度max-height,然后把超出部分隐藏。判断内容是否超出指定高度,超出就添加,"展开全文"的按钮。
添加按钮点击事件,点击后展开全文。
<html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>点击查看全文</title> <style> *{ margin:0; padding:0; } html,body{ height:100%; } body{ overflow-y: scroll; } .wrap{ max-height:500px; /*设置默认高度*/ overflow: hidden; position:relative; } p{ font-size: 16px; line-height: 20px; } /*展开全文*/ .unfold-field{ position:absolute; font-size: 0; bottom:0; width:100%; height:124px; z-index: 3; } .unfold-field .unflod-field_mask { height: 78px; width: 100%; background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,hsla(0,0%,100%,0)),to(#fff)); background-image: linear-gradient(-180deg,hsla(0,0%,100%,0),#fff); } .unfold-field_text{ cursor: pointer; width:100%; color: #406599;; height:46px; font-size: 0px; line-height: 46px; text-align: center; background:#fff; } .unfold-field_text span{ display:inline-block; font-size: 16px; height:46px; line-height: 46px; } .unfold-field_text span::after{ content:""; vertical-align: middle; background:url(http://c1.adline.com.cn/static/img/bottom.png); background-size: contain; background-repeat: no-repeat; width: 9px; height: 6px; display: inline-block; margin-left: 5px; } </style> </head> <body> <div class="wrap" > <div class="content"> <p>本月初,将自家无人驾驶汽车“开”上北京五环的李彦宏受到了媒体群嘲。然而,当媒体还在津津乐道“看互联网大佬如何违规驾驶吃罚单”的时候,百度已经开始享受人工智能带来的投资回报了。</p> <p>本月初,将自家无人驾驶汽车“开”上北京五环的李彦宏受到了媒体群嘲。然而,当媒体还在津津乐道“看互联网大佬如何违规驾驶吃罚单”的时候,百度已经开始享受人工智能带来的投资回报了。</p> <p>本月初,将自家无人驾驶汽车“开”上北京五环的李彦宏受到了媒体群嘲。然而,当媒体还在津津乐道“看互联网大佬如何违规驾驶吃罚单”的时候,百度已经开始享受人工智能带来的投资回报了。</p> <p>本月初,将自家无人驾驶汽车“开”上北京五环的李彦宏受到了媒体群嘲。然而,当媒体还在津津乐道“看互联网大佬如何违规驾驶吃罚单”的时候,百度已经开始享受人工智能带来的投资回报了。</p> <img src="http://rs.0.gaoshouyou.com/i/fc/9a/3efcc6287c9ab0a3c3eadc723205482d.jpg" width="100%" alt="" /> <p>本月初,将自家无人驾驶汽车“开”上北京五环的李彦宏受到了媒体群嘲。然而,当媒体还在津津乐道“看互联网大佬如何违规驾驶吃罚单”的时候,百度已经开始享受人工智能带来的投资回报了。</p> <p>本月初,将自家无人驾驶汽车“开”上北京五环的李彦宏受到了媒体群嘲。然而,当媒体还在津津乐道“看互联网大佬如何违规驾驶吃罚单”的时候,百度已经开始享受人工智能带来的投资回报了。</p> <p>本月初,将自家无人驾驶汽车“开”上北京五环的李彦宏受到了媒体群嘲。然而,当媒体还在津津乐道“看互联网大佬如何违规驾驶吃罚单”的时候,百度已经开始享受人工智能带来的投资回报了。</p> <p>本月初,将自家无人驾驶汽车“开”上北京五环的李彦宏受到了媒体群嘲。然而,当媒体还在津津乐道“看互联网大佬如何违规驾驶吃罚单”的时候,百度已经开始享受人工智能带来的投资回报了。</p> <p>本月初,将自家无人驾驶汽车“开”上北京五环的李彦宏受到了媒体群嘲。然而,当媒体还在津津乐道“看互联网大佬如何违规驾驶吃罚单”的时候,百度已经开始享受人工智能带来的投资回报了。</p> <p>本月初,将自家无人驾驶汽车“开”上北京五环的李彦宏受到了媒体群嘲。然而,当媒体还在津津乐道“看互联网大佬如何违规驾驶吃罚单”的时候,百度已经开始享受人工智能带来的投资回报了。</p> </div> <div class="unfold-field"> <div class="unflod-field_mask"></div> <div class="unfold-field_text"><span>展开全文</span></div> </div> </div> </body> <script type="text/javascript"> function unfold(){ var doc = document; var wrap=doc.querySelector(".wrap"); var unfoldField=doc.querySelector(".unfold-field"); unfoldField.onclick=function(){ this.parentNode.removeChild(this); wrap.style.maxHeight="1200px"; } document.onreadystatechange = function () { //当内容中有图片时,立即获取无法获取到实际高度,需要用 onreadystatechange if (document.readyState === "complete") { var wrapH=doc.querySelector(".wrap").offsetHeight; var contentH=doc.querySelector( 4000 ".content").offsetHeight; if(contentH <= wrapH){ // 如果实际高度大于我们设置的默认高度就把超出的部分隐藏。 unfoldField.style.display="none"; } } } } unfold(); </script> </html>
相关文章推荐
- 原生js实现鼠标点击效果(不是真实鼠标点击,用js模拟鼠标点击,类似jquery trigger效果)
- js 实现复选框(checkbox)类似单选钮(radio)点击互斥效果
- js实现类似淘宝继续拖动查看详情的弹簧效果
- js实现类似新浪微博首页内容渐显效果的方法
- JS原生代码实现鼠标移动图片随之移动效果(另加点击改变图片效果)
- Android进阶:实现android系统自带查看照片动画效果 类似Gallery手势滑动
- JS+DIV+CSS实现类似邮件发送时的蒙板效果
- swiper实现今日头条导航效果,在官方demo实现全部代码
- 基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
- JS实现鼠标经过用户头像显示资料卡的效果,可点击
- js实现点击获取验证码倒计时效果
- 实现类似百度文库在线查看文档效果---转
- js实现图片的点击滚动效果
- JS交互 点击WKWebView中的图片实现预览效果
- js实现移动端导航点击自动滑动效果
- TabLayout轻松实现仿今日头条顶部tab导航效果
- js实现仿网易点击弹出提示同时背景变暗效果
- js实现类似光照的炫彩文字渐变视觉冲击效果
- 怎样实现textview里显示的缩略图,点击查看大图的效果
- JS实现类似51job上的地区选择效果示例