手機端第一屏頁面文章的展開和隱藏

標籤：http   io   ar   color   os   sp   java   for   strong   

     本人做的是手機端的前端開發，事事處處都得從手機使用者的體驗著手考慮。大家都知道手機相對於pc來說要小很多，所要容納的東西相對於pc來說也要少之又少。一些重要的東西又希望使用者在開啟手機網站的第一屏就能看到，這時就要儘可能地將重點呈現給使用者。

      內容又由文字，圖片等等資訊組成，如果文字過長，就顯得冗餘，這裡就為大家介紹一個如何隱藏多餘文字和展開多餘文字的方法。

      需要的支援人員：CSS3，一般jQuery庫；

 

HTML代碼如下：

Html代碼  

1. <div class="slideup">This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.  
2. </div>  
3. <a href="javascript:void(0)" class="btn_click arrowdown">展開更多</a>  

 

CSS代碼如下：

Css代碼  

1. .slideup{width:320px;height:auto;overflow:hidden;margin:0 auto;border:1px solid #fff;text-align: center;padding: 10px;background: #999;color:#fff;font-weight:bold;border-radius: 0 0 8px 8px;}  
2. .the_height{height: 450px;}  
3. .slidedown{height: auto;}  
4. .btn_click{display: block;width: 120px;height: 30px;position:relative;line-height:30px;margin: 10px auto;color: #fff;background: #999;text-align: center;text-decoration: none;text-indent:-1em;border-radius: 5px;}  
5. .arrowup:after{content: "";width: 8px;height: 8px;border: 3px double #fff;position: absolute;top: 10px;right:18px;border-width: 3px 3px 0 0;-webkit-transform:rotate(-45deg);}  
6. .arrowup:before{content: "";width: 6px;height: 6px;border: 1px solid #fff;position: absolute;top: 15px;right:20px;border-width: 1px 1px 0 0;-webkit-transform:rotate(-45deg);}  
7. .arrowdown:after{content: "";width: 8px;height: 8px;border: 3px double #fff;position: absolute;top: 8px;right:18px;border-width: 3px 3px 0 0;-webkit-transform:rotate(135deg);}  
8. .arrowdown:before{content: "";width: 6px;height: 6px;border: 1px solid #fff;position: absolute;top: 7px;right:20px;border-width: 1px 1px 0 0;-webkit-transform:rotate(135deg);}  

 

js代碼如下：

Js代碼  

1. $(‘.btn_click‘).click(function(){  
2.     var class_lists=$(‘.slideup‘).attr(‘class‘);  
3.     var class_index=class_lists.indexOf(‘isdown‘);  
4.     if(class_index==-1){  
5.     $(‘.slideup‘).slideDown().addClass(‘isdown slidedown‘);  
6.     $(‘.btn_click‘).html("收合更多").removeClass(‘arrowdown‘).addClass(‘arrowup‘);  
7. }else{  
8.     $(‘.slideup‘).slideDown().addClass(‘the_height‘).removeClass(‘isdown slidedown‘);  
9.     $(‘.btn_click‘).html("展開更多").removeClass(‘arrowup‘).addClass(‘arrowdown‘);  
10. }  
11. });  
12. $(document).ready(function(){  
13.     var article_height=$(‘.slideup‘).height();  
14.     //alert(article_height);  
15.     if(article_height<=450){  
16.         $(‘.btn_click‘).hide();  
17.         $(‘.slideup‘).addClass(‘slidedown‘);  
18.     }else{  
19.         $(‘.slideup‘).addClass(‘the_height‘);  
20.     }  
21. });  

     

      最終效果如下：

      如果文字高度大於450px，就隱藏，如下：

      通過點擊展開更多按鈕即可展開更多文字，如下：

     

這裡也有幾個重點和大家說下：

1.頁面第一次載入時的狀態：按照按鈕的狀態分，一是文章高度大於450px時，按鈕隱藏；二是文章高度小於450px時，按鈕顯示。當按鈕顯示時，又分為兩個狀態，即為文章收合的狀態和文章展開的狀態；

2.CSS重點解析：.slideup:設定頁面載入時頁面的初始樣式；.the_height:設定頁面載入時，如果文章高度大於450px時，就添加該類；.slidedown:設定文章展開時的樣式；.btn_click:設定按鈕的初始樣式；.arrowup:after,.arrowup:before及.arrowdown:after,.arrowdown:before分別為文章展開和收合時的箭頭的方向設定；

3.js代碼解析：當HTML文檔載入完畢後，先做一個判斷，如果文章高度小於450px，那麼就正常顯示文章，展開收合按鈕隱藏；如果文章高度大於450px，就將文章的高度設定為450px，展開收合按鈕顯示。接下來，如果文章的高度大於450px，初始狀態為文章超出部分隱藏，點擊按鈕後，文章超出部分顯示，同時按鈕的狀態改變。

      這是對手機端文章顯示和隱藏的一個總結，望多多交流。

手機端第一屏頁面文章的展開和隱藏