您的位置:首页 > 教程笔记 > 前端笔记

htm加css和js实现手机端隐藏查看剩余点击展开,剩余%未阅读

2021-10-14 15:04:50 前端笔记 227
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 上传

相关推荐

  • tomcat的端口号怎么看

    tomcat的端口号怎么看

    Tomcat 端口号查看方法Tomcat 的端口号是服务器侦听连接请求的端口。以下是如何查看 Tomcat 端口号:方法 1:查看 server.xml 文件方法 2:查看 Tomcat 管理界面方法

    前端笔记 2024-04-23 20:06:47 408
  • 网页html文件怎么打开不了

    网页html文件怎么打开不了

    网页 HTML 文件打不开的原因当您尝试打开网页 HTML 文件时,可能会遇到无法打开的情况。以下是一些常见原因:1. 浏览器问题浏览器过时或损坏。浏览器缓存或扩展程序干扰文件加载。2. 文件损坏或不

    前端笔记 2024-04-11 20:42:53 290
  • css 技巧给元素一个左右边距的方法

    css 技巧给元素一个左右边距的方法

    在 CSS 中,给一个元素设置左右边距有多种方式,最常用的是通过 margin 属性。这里有几种不同的方法来设置左右边距:

    前端笔记 2023-12-14 15:45:10 288
  • css在中去除button按钮默认自带的样式的方法

    css在中去除button按钮默认自带的样式的方法

    这段代码将清除按钮的大部分默认样式,让它看起来更像一个普通的HTML元素,而不是一个浏览器风格化的按钮。您可以根据需要进一步定制这些样式。

    前端笔记 2023-11-20 15:33:02 276
  • 用css清除html中li标签列表自带的点的方法

    用css清除html中li标签列表自带的点的方法

    标签自带的点,您可以使用CSS的list-styl-ty属性。这个属性允许您控制列表项的标记样式,包括去除标记。以下是具体操作方法

    前端笔记 2023-11-20 17:37:16 251