Contoh dalam artikel ini menerangkan cara jQuery melaksanakan acara sintesis hover. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Acara sintesis hover jQuery, gunakan acara Hover sintesis untuk membuat panel terlipat, panel boleh dikembangkan dengan menuding tetikus, yang berbeza daripada Kod kesan khas ini berasal dari buku jQuery yang tajam.
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>jQuery hover合成事件</title> <script src="jquery1.3.2.js" type="text/javascript"></script> <style> *{margin:0;padding:0;} body { font-size: 13px; line-height: 130%; padding: 60px } #panel { width: 300px; border: 1px solid #0050D0 } .head { padding: 5px; background: #96E555; cursor: pointer } .content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block;display:none; } </style> <script type="text/javascript"> $(function(){ $("#panel h5.head").hover(function(){ $(this).next("div.content").show(); },function(){ $(this).next("div.content").hide(); }) }) </script> </head> <body> <div id="panel"> <h5 class="head">什么是jQuery?</h5> <div class="content"> jQuery hover合成事件,利用合成Hover事件制作折合面板,鼠标Hover上面即可展开面板,与Click不尽相同,此特效代码来自锋利的jQuery一书。 </div> </div> </body> </html>
Saya harap artikel ini akan membantu reka bentuk pengaturcaraan jquery semua orang.