快捷導(dǎo)航

jquery實現(xiàn)點擊查看更多內(nèi)容控制段落文字展開折疊效果

更新時間：2015年08月06日 11:26:55 作者：皮蛋

這篇文章主要介紹了jquery實現(xiàn)點擊查看更多內(nèi)容控制段落文字展開折疊效果,涉及jquery中fadeIn與fadeOut實現(xiàn)折疊與展開頁面元素的功能,非常具有實用價值,需要的朋友可以參考下

本文實例講述了jquery實現(xiàn)點擊查看更多內(nèi)容控制段落文字展開折疊效果。分享給大家供大家參考。具體如下：

這里使用jQuery實現(xiàn)的文字展開折疊效果，點擊文字后文字內(nèi)容會完整的顯示出來，控制段落來顯示文字，不需要的時候，可以再次點擊后將內(nèi)容折疊起來，也就是隱藏了一部分內(nèi)容。點擊查看更多的功能，在很多大網(wǎng)站都有在用，像一些電影簡介、產(chǎn)品介紹有時候為了頁面的布局效果，常常默認(rèn)是隱藏了一部分，用戶想看的時候可以點擊后展開。

運行效果如下圖所示：

具體代碼如下：

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery文本段落展開和折疊效果</title>
<style>
html,body,div,h2,p{margin: 0;padding: 0;}
html{font: 1em Arial, Helvetica, sans-serif;color: #444;}
a{color: #0087f1;}
p{margin-bottom: 5px;}
#container{margin: 0 auto;width: 600px;}
#container h2{font-size: 20px;color: #0087f1;}
#wrap{position: relative;padding: 10px;overflow: hidden;}
#gradient{width: 100%;height: 35px;background: url() repeat-x;position: absolute;bottom: 0;left: 0;}
#read-more{padding: 5px;border-top: 4px double #ddd;background: #fff;color: #333;}
#read-more a{padding-right: 22px;background: url() no-repeat 100% 50%;font-weight: bold;text-decoration: none;}
#read-more a: hover{color: #000;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
 var slideHeight = 75; // px
 var defHeight = $('#wrap').height();
 if(defHeight >= slideHeight){
  $('#wrap').css('height' , slideHeight + 'px');
  $('#read-more').append('<a href="#">點擊查看更多。。</a>');
  $('#read-more a').click(function(){
   var curHeight = $('#wrap').height();
   if(curHeight == slideHeight){
    $('#wrap').animate({
     height: defHeight
    }, "normal");
    $('#read-more a').html('點擊隱藏');
    $('#gradient').fadeOut();
   }else{
    $('#wrap').animate({
     height: slideHeight
    }, "normal");
    $('#read-more a').html('點擊查看更多。。');
    $('#gradient').fadeIn();
   }
   return false;
  });  
 }
});
</script>
</head>
<body>
 <div id="container">
  <h1>jQuery 控制段落文字展開折疊，點擊查看更多的功能</h1>
  <h2>About Billabong</h2>
  <div id="wrap">
   <div>
    <p>Gordon developed his own stitching technique, which made the garments more durable, cost effective and less labor intensive. He employed machinists, moved the operation into a factory, set up a distribution network and sponsored a team of renowned Australian surfers. The business thrived.</p>
    <p>Since those beginnings, Billabong has expanded its product range to include boardsport products such as wetsuits, watches, surfboards, snowboard outerwear and skateboarding apparel.</p>
   </div>
   <div id="gradient"></div>
  </div>
  <div id="read-more"></div>
 </div>
</body>
</html>

希望本文所述對大家的jquery程序設(shè)計有所幫助。

您可能感興趣的文章: