首页>>Jquery文字>>简单的阅读更多 more效果(2013-11-02)

简单的阅读更多 more效果

 点击more在后面显示隐藏的部分，注意本例对中文无效

简单的阅读更多 more效果
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="table">  
  2.   
  3.     <div class="row">  
  4.           
  5.         <div class="desc">  
  6.               
  7.             <p class="excerpt">已经发了不少无刷新翻页的代码了，点击右侧“相关文章”可以找到，这边这个不同在于多了一个跳转页面。  
  8. 数据库与本站其他翻页的相而且本例更简单易懂数据库表  
  9. </p>  
  10.         </div>  
  11.         <div class="clear"></div>  
  12.     </div>  
  13.       
  14.     <div class="row">  
  15.           
  16.         <div class="desc">  
  17.               
  18.             <p class="excerpt">A picture is worth a thousand words. Most of the time, I found that a complex idea can be conveyed easily with a single still image. Infographic is a good example. Infographic is a graphic representation of data, information and or knowledge. I have collected 21 Amazing and beautiful infographics, enjoy!</p>  
  19.         </div>  
  20.         <div class="clear"></div>         
  21.     </div>  
  22.       
  23.     <div class="row">  
  24.           
  25.         <div class="desc">  
  26.               
  27.             <p class="excerpt">Another post that demonstrate the power of HTML5 and CSS3. New experimental demonstrates are being released so often, so I must make another post for it! </p></div>  
  28.         <div class="clear"></div>         
  29.     </div>  
  30.       
  31.   
  32. </div>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2.       
  3.     $(function () {  
  4.   
  5.         // Grab all the excerpt class  
  6.         $('.excerpt').each(function () {  
  7.           
  8.             // Run formatWord function and specify the length of words display to viewer  
  9.             $(this).html(formatWords($(this).html(), 30));  
  10.               
  11.             // Hide the extra words  
  12.             $(this).children('span').hide();  
  13.           
  14.         // Apply click event to read more link  
  15.         }).click(function () {  
  16.   
  17.             // Grab the hidden span and anchor  
  18.             var more_text = $(this).children('span.more_text');  
  19.             var more_link = $(this).children('a.more_link');  
  20.                   
  21.             // Toggle visibility using hasClass  
  22.             // I know you can use is(':visible') but it doesn't work in IE8 somehow...  
  23.             if (more_text.hasClass('hide')) { 
  24.                 more_text.show(); 
  25.                 more_link.html(' » hide');         
  26.                 more_text.removeClass('hide'); 
  27.             } else { 
  28.                 more_text.hide(); 
  29.                 more_link.html(' « more');             
  30.                 more_text.addClass('hide'); 
  31.             } 
  32.  
  33.             return false; 
  34.          
  35.         }); 
  36.     }); 
  37.  
  38.     // Accept a paragraph and return a formatted paragraph with additional html tags 
  39.     function formatWords(sentence, show) { 
  40.  
  41.         // split all the words and store it in an array 
  42.         var words = sentence.split(' '); 
  43.         var new_sentence = ''; 
  44.  
  45.         // loop through each word 
  46.         for (i = 0; i < words.length; i++) { 
  47.      
  48.             // process words that will visible to viewer 
  49.             if (i <= show) { 
  50.                 new_sentence += words[i] + ' '; 
  51.                  
  52.             // process the rest of the words 
  53.             } else { 
  54.          
  55.                 // add a span at start 
  56.                 if (i == (show + 1)) new_sentence += '... <span class="more_text hide">';        
  57.  
  58.                 new_sentence += words[i] + ' '; 
  59.              
  60.                 // close the span tag and add read more link in the very end 
  61.                 if (words[i+1] == null) new_sentence += '</span><a href="#" class="more_link"> » more</a>';  
  62.             }         
  63.         }   
  64.       
  65.         return new_sentence;  
  66.   
  67.     }     
  68.     </script>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_96.html