js点击阅读全文

最新推荐文章于 2024-01-10 23:14:42 发布

QSWQSWQSWQSWQSW

最新推荐文章于 2024-01-10 23:14:42 发布

阅读量2.2k

点赞数

分类专栏： IT js css html 文章标签： js点击阅读全文

本文链接：https://blog.csdn.net/qq_43209114/article/details/95339461

版权

IT 同时被 3 个专栏收录

83 篇文章 2 订阅

订阅专栏

46 篇文章 0 订阅

订阅专栏

html

41 篇文章 1 订阅

订阅专栏

html

<div class="wrap">
	<div class="detail_main content_wrap">
		{$info['content']|htmlspecialchars_decode}
	</div>
	<div class="unfold-field">
		<!-- <div class="unflod-field_mask"></div> -->
		<div class="unfold-field_text">
			<!-- <span>展开全文</span> -->
			<div class="read_article">点击阅读全文</div>
		</div>
	</div>
</div>

css

/* 阅读全文 */
.wrap {
	max-height: 7.9rem;
	/*设置默认高度*/
	overflow: hidden;
	margin-bottom: 1rem;
	position: relative;
	visibility: hidden;
}
/*展开全文*/

.unfold-field {
	/* display: none; */
	position: absolute;
	font-size: 0;
	bottom: 0;
	width: 100%;
	height: 0;
	z-index: 3;
}

.unfold-field .unflod-field_mask {
	height: 0.78rem;
	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);
}
.read_article{
	width: 6.9rem;
	height: 0.88rem;
	line-height: 0.88rem;
	color: #fff;
	background: #000000;
	text-align: center;
	font-size: 0.36rem;
	border-radius:0.44rem;
	margin: 0.5rem auto;
	margin-top: -0.87rem;
	-moz-box-shadow:0px -10px 10px #fff; 
	-webkit-box-shadow:0px -10px 10px #fff; 
	box-shadow:0px -5px 15px #fff;
}
.unfold-field_text{
	background: #fff;
}

js

//阅读全文
var unfoldField = document.querySelector(".read_article");
var wrapH = document.querySelector(".wrap").offsetHeight;
var wrap = document.querySelector(".wrap");
var contentH = document.querySelector(".content_wrap").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";
}