jquery implementiert „Klicken, um mehr Inhalt anzuzeigen', um den Erweiterungs- und Falteffekt von Absatz text

jquery implementiert „Klicken, um mehr Inhalt anzuzeigen', um den Erweiterungs- und Falteffekt von Absatz text_jquery zu steuern

不言

Freigeben： 2018-05-24 15:53:27

Original

30232 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die jquery-Implementierung des Klickens, um mehr Inhalt anzuzeigen, um den Erweiterungs- und Falteffekt von Absatztext zu steuern. Teilen Sie es als Referenz mit allen. Die Details sind wie folgt:

Hier verwenden wir jQuery, um den Texterweiterungs- und Faltungseffekt zu implementieren. Wenn der Text nicht benötigt wird, wird er vollständig angezeigt , können Sie erneut klicken, um den Inhalt auszublenden. Das heißt, ein Teil des Inhalts wird ausgeblendet. Klicken Sie hier, um weitere Funktionen anzuzeigen, die in vielen großen Websites verwendet werden. Beispielsweise sind einige Filmeinführungen und Produkteinführungen manchmal standardmäßig ausgeblendet, um den Layouteffekt der Seite zu verbessern. Benutzer können darauf klicken, um sie anzuzeigen.

Der Betriebseffekt ist in der folgenden Abbildung dargestellt:

Der spezifische Code lautet wie folgt:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery文本段落展开和折叠效果</title>
<style>
html,body,p,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?7.1.34"></script>
<script type="text/javascript">
$(function(){
 var slideHeight = 75; // px
 var defHeight = $(&#39;#wrap&#39;).height();
 if(defHeight >= slideHeight){
  $(&#39;#wrap&#39;).css(&#39;height&#39; , slideHeight + &#39;px&#39;);
  $(&#39;#read-more&#39;).append(&#39;<a href="#">点击查看更多。。</a>&#39;);
  $(&#39;#read-more a&#39;).click(function(){
   var curHeight = $(&#39;#wrap&#39;).height();
   if(curHeight == slideHeight){
    $(&#39;#wrap&#39;).animate({
     height: defHeight
    }, "normal");
    $(&#39;#read-more a&#39;).html(&#39;点击隐藏&#39;);
    $(&#39;#gradient&#39;).fadeOut();
   }else{
    $(&#39;#wrap&#39;).animate({
     height: slideHeight
    }, "normal");
    $(&#39;#read-more a&#39;).html(&#39;点击查看更多。。&#39;);
    $(&#39;#gradient&#39;).fadeIn();
   }
   return false;
  });  
 }
});
</script>
</head>
<body>
 <p id="container">
  <h1>jQuery 控制段落文字展开折叠，点击查看更多的功能</h1>
  <h2>About Billabong</h2>
  <p id="wrap">
   <p>
    <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>
   </p>
   <p id="gradient"></p>
  </p>
  <p id="read-more"></p>
 </p>
</body>
</html>

Nach dem Login kopieren