Contoh dalam artikel ini menerangkan cara jQuery melaksanakan lapisan pop timbul kecerunan dan menu timbul. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut: Salin kod Kod adalah seperti berikut: jQuery melaksanakan lapisan pop timbul kecerunan dan menu pop timbul /* Lapisan pop timbul kecerunan */ badan{saiz fon:9pt;} #race{display:block;width:200px;height:50px;line-height:50px;text-align:center;background:#CCC;border:#555 1px solid;} .raceShow{background-color:#f1f1f1;border:solid 1px #ccc;position:absolute;display:none;width:300px;height:100px;padding:5px;font-size:12px;} #UpLayer span{border:#fff 1px width:80px; #UpLayer ul{display:none;position:absolute;border:#ccc 1px solid;width:80px;line-height:20px; latar belakang:#f1f1f1; #UpLayer ul li{ border-bottom:#ccc 1px dashed;} <br> //Lapisan pop timbul kecerunan<br> $(dokumen).sedia(fungsi(){<br> kelajuan var = 600;//Kelajuan animasi<br> $("#race a").click(function(event){//Mengikat pemprosesan acara<br> event.stopPropagation();<br> var offset = $(event.target).offset();//Batalkan acara menggelegak<br> $("#racePop").css({ top:offset.top $(event.target).height() "px", left:offset.left });//Tetapkan kedudukan lapisan pop timbul<br> $("#racePop").show(speed);//Paparan animasi<br> });<br> $(document).click(function(event) { $("#racePop").hide(speed) });//Klik kawasan kosong untuk bersembunyi<br> $("#racePop").click(function(event) { $("#racePop").hide(speed) });//Klik lapisan pop timbul untuk menyembunyikan dirinya<br> var objStr = "#UpLayer";<br> $(objStr).mouseover(function(){$(objStr " ul").show();});<br> $(objStr).mouseout(function(){$(objStr " ul").hide();});<br> });<br> </skrip><br> <!-- Lapisan pop timbul kecerunan --><br> <div id="race"><a href="#">Klik</a></div><br> <div id="racePop" class="raceShow">Berikut ialah kesan lapisan pop timbul</div><br> <div id="UpLayer"><br> <span><a href="javascript:void(0)">Lapisan timbul</a></span><br> <ul><br> </ul> </div><br> </body><br> </html><br><br> <br>Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang. <br> </div>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
