Contoh dalam artikel ini menerangkan cara jQuery melaksanakan menu gelongsor dinamik yang boleh digunakan untuk blog. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut: Salin kod Kod adalah seperti berikut: jQuery滑动菜单插件 <br> (fungsi($){<br> $.fn.extend({<br> tagdrop: fungsi(pilihan) {<br> var lalai = {<br> tagPaddingTop: '90px',<br> tagDefaultPaddingTop: '30px',<br> bgWarna: '#B1CCED',<br> bgMoverColor: '#7FB0F0',<br> Warna teks: '#e0e0e0',<br> textDefaultColor: '#fff'<br> };<br> var options = $.extend(defaults, options);<br> kembalikan this.each(function() {<br> var obj = $(this);<br> var li_items = $("li", obj);<br> $("li", obj).css('background-color', options.bgColor);<br> li_items.mouseover(function(){<br> $(this).animate({paddingTop: options.tagPaddingTop}, 300);<br> $(this).css('background-color', options.bgMoverColor);<br> $(this).css('color', options.textColor);<br> }).mouseout(function() {<br> $(this).animate({paddingTop: options.tagDefaultPaddingTop}, 500);<br> $("li",$(this).parent()).css('background-color', options.bgColor);<br> $("li",$(this).parent()).css('color', options.textDefaultColor);<br> });<br> });<br> }<br> });<br> })(jQuery);<br> </skrip><br> <script type="text/javascript"><br> $(dokumen).sedia(fungsi() {<br> $('.menu').tagdrop({tagPaddingTop: '60px',bgColor: '#B1CCED',bgMoverColor: '#7FB0F0',textColor: '#e0e0e0'});<br> });<br> </skrip><br> <gaya><br> badan {<br> jidar:0;<br> pelapik:0;<br> }<br> #nav li {margin: 0; pelapik: 0;paparan: sebaris;jenis-gaya senarai: tiada;saiz fon: 12px;}<br> #nav a:link, #nav a:dilawati {<br> }<br> #nav a:hover {color: #fff; latar belakang:#FF6A00;}<br> #nav a:visited.active, #nav a:link.active {warna latar belakang: #fff;warna: #FF6A00;}<br> .menu {<br> gaya senarai:tiada;<br> jidar: 0;<br> float:right;<br> }<br> .menu li {<br> float:left;<br> margin:0 auto;<br> kursor:penunjuk;<br> ketinggian:30px;<br> padding:30px 5px 5px 5px;<br> jidar:0px 3px 0px 3px;<br> -jejari-sempadan-moz: 0px 0px 10px 10px;<br> -webkit-border-radius:0px 0px 10px 10px;<br> -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);<br> -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);<br> warna: #FFF;<br> bayang teks: 0 -1px 1px rgba(0,0,0,0.25);<br> keluarga fon: "Lucida Grande",Lucida,Verdana,sans-serif;<br> saiz fon:13px;<br> font-weight:bold;<br> text-transform:huruf besar;<br> }<br> </style><br> </head><br> <badan><br> <ul class="menu"><br> <li>Mengenai kami</li><br> <li>Kenalan</li><br> <li>Lain-lain</li><br> <li>Produk</li><br> <li>Portfolio</li><br> <li>Testimoni</li><br> </ul><br> </body><br> </html></div> <p>希望本文所述对大家的 jQuery程序设计有所帮助。</p>