svip

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

1. if ($('.article-body').length) {
   
2.   if ($(".content").length) {
   
3.     var Content = $(".content");
   
4.     var Tipstext = $(".more-content-text");
   
5.     var OpenHeight = 1200;
   
6.     Content.css('maxHeight', '');
   
7. 
   
8.     var Totheight = Content.height();
   
9.     var size = Math.floor(Totheight / OpenHeight) - 1;
   
10. 
    
11.     if (size >= 2) {
    
12.       var curr = 1;
    
13.       var percent = Math.floor(100 - (100 / size) * curr);
    
14.       Content.css('maxHeight', OpenHeight + 'px');
    
15.       Tipstext.html('点击展开，剩余' + percent + '%未阅读');
    
16.       Tipstext.on("click", function() {
    
17.         getOpenMore(curr, size);
    
18.       });
    
19.       $(".pagelist").hide();
    
20.     } else {
    
21.       if (Totheight > 1500) {
    
22.         Content.css('maxHeight', OpenHeight + 'px');
    
23.         Tipstext.html('未完...展开全文');
    
24.         Tipstext.on("click", function() {
    
25.           getOpenMore(1, 1);
    
26.         });
    
27.         $(".pagelist").hide();
    
28.       } else {
    
29.         Content.css('maxHeight', '');
    
30.         $(".more-content").hide();
    
31.         $(".pagelist").show();
    
32.       }
    
33.     }
    
34. 
    
35.     function getOpenMore(curr_in, size) {
    
36.       if (curr_in < size - 1) {
    
37.         var curr = curr_in + 1;
    
38.         var percent = Math.floor(100 - (100 / size) * curr);
    
39.         Content.css('maxHeight', OpenHeight * curr + 'px');
    
40.         Tipstext.html('点击展开，剩余' + percent + '%未阅读');
    
41.         Tipstext.on("click", function() {
    
42.           getOpenMore(curr, size);
    
43.         });
    
44.         $(".pagelist").hide();
    
45.       } else {
    
46.         Content.css('maxHeight', '');
    
47.         $(".more-content").hide();
    
48.         $(".pagelist").show();
    
49.       }
    
50.     }
    
51.   }
    
52. }

复制代码

html部分

1. <div class="more-content">
   
2. <div class="more-content-mask">
   
3.         </div>
   
4.         <div class="more-content-text">
   
5.         </div>
   
6. </div>

复制代码

css部分：

1. .more-content .more-content-text {
   
2.     font-size: 14px;
   
3.     line-height: 40px;
   
4.     margin: 0 auto;
   
5.     color: #fff;
   
6.     background: #6f98b0;
   
7.     text-align: center;
   
8.     height: 40px;
   
9.     cursor: pointer;
   
10.     width: 90%;
    
11.     display: block;
    
12.     border-radius: 50px;
    
13. }

复制代码

其中.article-body是第一内容元素，.content第二元素