1、添加样式
html
<style type="text/css">
.mask {
position: absolute;
bottom: -5px;
color: #4b83f0;
font-weight: 700;
font-size: 14px;
text-align: center;
height: 80px;
left: 0;
right: 0;
background-image: -webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 100%, 0)), to(#fff));
background-image: linear-gradient(hsla(0, 0%, 100%, 0), #fff);
}
.mask.expand {
background-image: none;
}
.mask span {
position: absolute;
bottom: 5px;
left: 50%;
margin-left: -25px;
cursor: pointer;
}
.mask-fold {
height: 300px;
}
</style>
2、添加展开收起按钮div (i为图标,可自行修改)
html
@* 为div添加maskDiv *@
<template id="template_div-mask">
<div class="mask">
<span>
<i class="layui-icon layui-icon-down layui-font-12"></i> 展开
</span>
</div>
</template>
<template id="template_div-mask2">
<div class="mask expand">
<span>
<i class="layui-icon layui-icon-up layui-font-12"></i> 收起
</span>
</div>
</template>
3、添加js代码响应逻辑(此处设置div高度超过300px时,显示收起展开)
javascript
/** 添加展开或折叠按钮 */
function AppendMask() {
// 为content-image自动判定,并添加mask
$.each($(".content-image"), function (index, contentImage) {
appendMaskItem(index, contentImage);
});
}
/** 为contentImage添加mask的展开或折叠按钮 */
function appendMaskItem(index, contentImage) {
var newMakItem = $("#template_div-mask").html();
var divHeight = contentImage.getClientRects()[0].height;
if (divHeight > 300) {
//debugger;
$(contentImage.parentNode).append(newMakItem);
$(contentImage).addClass("mask-fold");
}
}
/** 点击mask的展开或折叠按钮 */
$(document).on("click", ".mask>span", function () {
//debugger;
var maskDiv = $(this).parents(".mask");
var isExpand = $(maskDiv).hasClass("expand");
var newMakItem = $(isExpand ? "#template_div-mask" : "#template_div-mask2").html();
var parentDiv = maskDiv[0].parentNode;
$(parentDiv).append(newMakItem);
$(maskDiv[0]).remove();
var firstDiv = parentDiv.children[0];
if (isExpand) {
$(firstDiv).addClass("mask-fold");
}
else {
$(firstDiv).removeClass("mask-fold");
}
});
4、在界面中的div元素显示完成后调用:
setTimeout(AppendMask, 5000);