Rumah > Artikel > hujung hadapan web > jquery hanya melaksanakan kesan pengembangan dan pengecutan halaman web layer_jquery

jquery hanya melaksanakan kesan pengembangan dan pengecutan halaman web layer_jquery

WBOYasal: 2016-05-16 15:46:211226semak imbas

Contoh dalam artikel ini menerangkan pelaksanaan mudah kesan pengembangan dan pengecutan lapisan halaman web dengan jquery. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Berikut ialah demonstrasi pengembangan lapisan halaman web jquery dan kod pengecutan lapisan, dengan kesan animasi penimbal Klik teks atau butang yang ditentukan untuk mengembangkan lapisan yang ditentukan, dan klik sekali lagi untuk meruntuhkan lapisan tersebut dilihat dalam talian, sila ikuti Jika anda perlu mengubah suai kod, jangan lupa untuk memperkenalkan pemalam jQuery terkini.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Kod khusus adalah seperti berikut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Div层的收缩与展开</title>
<style>
#content {
font-size: 14px;
width: 730px;
height: 25px;
background:#FFF; line-height:25px;
border: 1px #ccc double;
overflow: hidden;
border:1px solid #99a5ab;
}
#key {
color: red;
float: right;
width:50px;
height:25px;
line-height:25px
margin:0 0 0 0;
}
</style>
<script type='text/javascript' src='jquery-1.6.2.min.js'></script>
<script type="text/javascript">
 $(function(){
  $("#key").toggle(function(){
   $(this).html("关闭").parent().animate({height:"280px"},1000);
   },function(){
   $(this).html("展开").parent().animate({height:"25px"},1000);
   })
 })
</script>
</head>
<body>
<div id="content"> <span id="key"">展开</span><span class="fonttitle">标题</span>
  <table width="700" border="1px" cellpadding="0" cellspacing="0">
   <tr>
   <td>1</td>
   <td>2</td>
   <td>2</td>
   <td>2</td>
   <td>2</td>
   <td>2</td>
   <td>2</td>
   <td>2</td>
   </tr>
   </table>
   </div>
</body>
</html>

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan jquery semua orang.

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：Cara menggunakan javascript untuk memaparkan kesan teks apabila tetikus dialihkan ke atas kemahiran image_javascriptArtikel seterusnya：Cara menggunakan javascript untuk memaparkan kesan teks apabila tetikus dialihkan ke atas kemahiran image_javascript

Artikel berkaitan

Lihat lagi