cari

Rumah  >  Artikel  >  hujung hadapan web  >  jquery melaksanakan kod kesan khas pengindahan kotak lungsur pilih

jquery melaksanakan kod kesan khas pengindahan kotak lungsur pilih

PHPz
PHPzke hadapan
2016-05-16 15:44:251667semak imbas

Artikel ini terutamanya memperkenalkan pelaksanaan jquery untuk mencantikkan kotak drop-down pilihan Kesannya mudah dan elegan Ia disyorkan kepada semua orang yang memerlukannya.

Ini ialah kod kesan khas berdasarkan jquery untuk melaksanakan pengindahan kotak lungsur terpilih Pengguna boleh memilih kandungan menu lungsur Ia adalah kod sumber kesan khas yang sangat praktikal.

Pelaksanaan jquery bagi kod kesan khas pengindahan kotak lungsur pilih yang dikongsi dengan semua orang adalah seperti berikut 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/g.css" type="text/css" rel="stylesheet" />
<link href="css/css.css" type="text/css" rel="stylesheet" />
</head>
<body>
<p class="searchbox">
 <p class="searchZone clearfix">
 <form target="_blank">
 <fieldset>
 <label>
 <input type="text" class="text" name="keyword" onblur="if(this.value==&#39;&#39;){this.value=&#39;请输入关键字&#39;;this.style.color=&#39;#aaa&#39;}" onfocus="if(this.value==&#39;请输入关键字&#39;){this.value=&#39;&#39;;this.style.color=&#39;#333&#39;}" value="请输入关键字" />
 </label>
 <p class="left">
 <select style="display: none;" name="mySle" id="mySle">
 <option selected="selected" value="0">全站搜索</option>
 <option value="1">素材搜索</option>
 <option value="2">设计欣赏</option>
 <option value="3">桌面壁纸</option>
 <option value="4">设计教程</option>
 </select>
 </p>
 <label>
 <button type="submit">快给我搜一下</button>
 </label>
 </fieldset>
 </form>
 <script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript" src="js/selectbox.js"></script>
 <script type="text/javascript"> $(document).ready(function() {$(&#39;#mySle&#39;).selectbox();});</script>
 </p>
</p>
</body>
</html>

Penebaran berjalan:

Alamat demonstrasi dalam talian ：http://demo.jb51.net/js/2015/jquery-select-xlkmh/

Jika anda mahukan lebih banyak kesan kotak drop-down, anda boleh klik Ringkasan kesan kotak lungsur jquery/JavaScript.

Di atas ialah pelaksanaan jQuery bagi kod kesan khas pengindahan kotak lungsur terpilih yang dikongsi dengan anda. Untuk lebih banyak tutorial berkaitan, sila lawati tutorial video jQuery!

Kenyataan：
Artikel ini dikembalikan pada:jb51.net. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：imej besar jQuery di sebelah kiri, imej kecil di sebelah kanan, tayangan slaid imej fokus menukar kod sharing_jqueryArtikel seterusnya：imej besar jQuery di sebelah kiri, imej kecil di sebelah kanan, tayangan slaid imej fokus menukar kod sharing_jquery

Artikel berkaitan

Lihat lagi