htm加css和js实现手机端隐藏查看剩余点击展开,剩余%未阅读
js部分代码:
if ($('.article-body').length) {
if ($(".content").length) {
var Content = $(".content");
var Tipstext = $(".more-content-text");
var OpenHeight = 1200;
Content.css('maxHeight', '');
var Totheight = Content.height();
var size = Math.floor(Totheight / OpenHeight) - 1;
if (size >= 2) {
var curr = 1;
var percent = Math.floor(100 - (100 / size) * curr);
Content.css('maxHeight', OpenHeight + 'px');
Tipstext.html('点击展开,剩余' + percent + '%未阅读');
Tipstext.on("click", function() {
getOpenMore(curr, size);
});
$(".pagelist").hide();
} else {
if (Totheight > 1500) {
Content.css('maxHeight', OpenHeight + 'px');
Tipstext.html('未完...展开全文');
Tipstext.on("click", function() {
getOpenMore(1, 1);
});
$(".pagelist").hide();
} else {
Content.css('maxHeight', '');
$(".more-content").hide();
$(".pagelist").show();
}
}
function getOpenMore(curr_in, size) {
if (curr_in < size - 1) {
var curr = curr_in + 1;
var percent = Math.floor(100 - (100 / size) * curr);
Content.css('maxHeight', OpenHeight * curr + 'px');
Tipstext.html('点击展开,剩余' + percent + '%未阅读');
Tipstext.on("click", function() {
getOpenMore(curr, size);
});
$(".pagelist").hide();
} else {
Content.css('maxHeight', '');
$(".more-content").hide();
$(".pagelist").show();
}
}
}
}
html部分<div class="more-content">
<div class="more-content-mask">
</div>
<div class="more-content-text">
</div>
</div>
css部分:.more-content .more-content-text {
font-size: 14px;
line-height: 40px;
margin: 0 auto;
color: #fff;
background: #6f98b0;
text-align: center;
height: 40px;
cursor: pointer;
width: 90%;
display: block;
border-radius: 50px;
}
其中.article-body是第一内容元素,.content第二元素QQ20230616133309.png(7.5 KB, 下载次数: 33)
2023-6-16 13:34 上传
声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至201542412@QQ.com举报,一经查实,本站将立刻删除。
相关推荐
-
tomcat的端口号怎么看
Tomcat 端口号查看方法Tomcat 的端口号是服务器侦听连接请求的端口。以下是如何查看 Tomcat 端口号:方法 1:查看 server.xml 文件方法 2:查看 Tomcat 管理界面方法
-
网页html文件怎么打开不了
网页 HTML 文件打不开的原因当您尝试打开网页 HTML 文件时,可能会遇到无法打开的情况。以下是一些常见原因:1. 浏览器问题浏览器过时或损坏。浏览器缓存或扩展程序干扰文件加载。2. 文件损坏或不
-
css 技巧给元素一个左右边距的方法
在 CSS 中,给一个元素设置左右边距有多种方式,最常用的是通过 margin 属性。这里有几种不同的方法来设置左右边距:
-
css在中去除button按钮默认自带的样式的方法
这段代码将清除按钮的大部分默认样式,让它看起来更像一个普通的HTML元素,而不是一个浏览器风格化的按钮。您可以根据需要进一步定制这些样式。
-
用css清除html中li标签列表自带的点的方法
标签自带的点,您可以使用CSS的list-styl-ty属性。这个属性允许您控制列表项的标记样式,包括去除标记。以下是具体操作方法