Js实现点击查看全文(类似今日头条、知乎日报效果)

时间: 2018-03-01阅读: 5112标签: js知识

这篇文章主要为大家详细介绍了原生js+css仿QQ今日头条、知乎日报点击查看全文的效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下. 


移动端demo

  1. 需要设置过最大高度max-height,然后把超出部分隐藏。

  2. 判断内容是否超出指定高度,超出就添加,"展开全文"的按钮。

  3. 添加按钮点击事件,点击后展开全文。

代码

<!DOCTYPE html>  
<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;  
}  
.wrap{  
max-height:14rem;  /*设置默认高度*/  
overflow: hidden;  
position:relative;  
visibility: hidden;  
}  
p{  
font-size: 16px;  
line-height: 20px;  
}  
/*展开全文*/  
.unfold-field{  
display:none;  
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>  
                <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">  
window.onload=function(){  
var unfoldField=document.querySelector(".unfold-field");  
var wrapH=document.querySelector(".wrap").offsetHeight;  
var wrap=document.querySelector(".wrap");  
var contentH=document.querySelector(".content").offsetHeight;  
// 如果实际高度大于我们设置的默认高度就把超出的部分隐藏。  
if(contentH>wrapH){  
   unfoldField.style.display="block";  
}  
wrap.style.visibility="visible";  
unfoldField.onclick=function(){  
   this.parentNode.removeChild(this);  
   wrap.style.maxHeight="100%";  
   wrap.style.visible="visible";  
}  
  
}  
</script>  
</html>


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/453

WebSocket的原理及WebSocket API的使用,js中如何运用websocket

WebSocket是HTML5下一种新的协议,为解决客户端与服务端实时通信而产生的技术。其本质是先通过HTTP/HTTPS协议进行握手后创建一个用于交换数据的TCP连接

JavaScript中“javascript:void(0) ”是什么意思

expression 是一个要计算的 Javascript 标准的表达式。表达式外侧的圆括号是可选的,鉴于规范化,以及养成好习惯,建议写上去。当我们使用 void 操作符指定超级链接时,表达式会被计算但是不会在当前文档处装入任何内容。

document.write和innerHTML的区别

document.write只能重绘整个页面,innerHTML可以重绘页面的一部分。 document.write是直接写入到页面的内容流,如果在写之前没有调用document.open, 浏览器会自动调用open。

JavaScript 优雅的实现方式包含你可能不知道的知识点【转】

Js优雅的实现方式包含你可能不知道的知识点:简短优雅地实现 sleep 函数,js获取时间戳,js数组去重,js数字格式化,js交换两个整数,将 argruments 对象(类数组)转换成数组,数字取整等

window.location.href的用法(动态输出跳转)

javascript中的location.href有很多种用法,window.location.href 语句可以实现一个框架的页面在执行服务器端代码后刷新另一个框架的页面

JS方法整理_js常用函数大全

都是日常工作中使用的一些js方法,整理出来以便大家学习使用。主要包括:Js获取页面地址参数 、千分位 、判断是否数字 、图片按比例压缩、截取指定字节数的字符串、判断是否微信 、获取时间格式的几个举例 、获取字符串字节长度 、对象克隆、深拷贝 ...

js中return关键词的作用_return的用法详解

return从字面意思来看就是返回,官方定义return语句将终止当前函数并可以返回当前函数的值; 也就是说return后面可以跟一个value,也就是说可以跟javascript中的任何数据类型

avaScript与WebAssembly进行比较+在哪些情况下会优于JavaScript

这是专门探索JavaScript及其构建组件的系列,在识别和描述核心元素的过程中,我们还分享了构建SessionStack时使用的一些经验法则,这是一个轻量级但健壮且高性能的JavaScript应用程序,以帮助用户实时查看和重现其Web应用程序的缺陷。

你所忽略的js隐式转换

你有没有在面试中遇到特别奇葩的js隐形转换的面试题,第一反应是怎么会是这样呢?难以自信,js到底是怎么去计算得到结果,你是否有深入去了解其原理呢?下面将深入讲解其实现原理。

TS与JS中的Getters和Setter究竟有什么用?

在本文中,我们讨论了getter 和 setter 在现代 Web 开发中的实用性。它们有用吗?什么时候使用它们是有意义的?尽管我不同意 getter 和 setter 完全是一个反模式。但它们在几种情况下能带来更多的实用性。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!