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

2021-10-14 15:04:50 前端笔记 220

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 上传