cari

Rumah  >  Artikel  >  hujung hadapan web  >  jquery melaksanakan klik untuk melihat lebih banyak kandungan untuk mengawal pengembangan dan kesan lipatan perenggan text_jquery

jquery melaksanakan klik untuk melihat lebih banyak kandungan untuk mengawal pengembangan dan kesan lipatan perenggan text_jquery

不言
不言asal
2018-05-24 15:53:2730217semak imbas

Contoh dalam artikel ini menerangkan pelaksanaan klikan jquery untuk melihat lebih banyak kandungan untuk mengawal pengembangan dan kesan lipatan teks perenggan. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Di sini kami menggunakan jQuery untuk melaksanakan pengembangan teks dan kesan lipatan Selepas mengklik pada teks, kandungan teks akan dipaparkan sepenuhnya untuk memaparkan teks , anda boleh mengklik sekali lagi untuk meruntuhkan kandungan Maksudnya, sebahagian daripada kandungan itu tersembunyi. Klik untuk melihat lebih banyak fungsi digunakan dalam banyak tapak web yang besar Contohnya, beberapa pengenalan filem dan pengenalan produk kadangkala disembunyikan secara lalai untuk kesan reka letak halaman Pengguna boleh mengklik untuk mengembangkan apabila mereka mahu melihatnya.

Kesan operasi ditunjukkan dalam rajah di bawah:

Kod khusus adalah seperti berikut: 

<!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>


jquery
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Bagaimana jQuery melaksanakan hover synthesis events_jqueryArtikel seterusnya：Bagaimana jQuery melaksanakan hover synthesis events_jquery

Artikel berkaitan

Lihat lagi