快捷導(dǎo)航

jquery實(shí)現(xiàn)select下拉框美化特效代碼分享

更新時(shí)間：2015年08月18日 10:35:39 投稿：lijiao

這篇文章主要介紹了jquery實(shí)現(xiàn)select下拉框美化特效,實(shí)現(xiàn)效果簡潔大方，推薦給大家，有需要的小伙伴可以參考下。

這是一款基于jquery實(shí)現(xiàn)select下拉框美化特效代碼，用戶可以選擇下拉菜單內(nèi)容，是一款非常實(shí)用的特效源碼。
為大家分享的jquery實(shí)現(xiàn)select下拉框美化特效代碼如下

<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>
<div class="searchbox">
 <div class="searchZone clearfix">
 <form target="_blank">
 <fieldset>
 <label>
 <input type="text" class="text" name="keyword" onblur="if(this.value==''){this.value='請輸入關(guān)鍵字';this.style.color='#aaa'}" onfocus="if(this.value=='請輸入關(guān)鍵字'){this.value='';this.style.color='#333'}" value="請輸入關(guān)鍵字" />
 </label>
 <div class="left">
 <select style="display: none;" name="mySle" id="mySle">
 <option selected="selected" value="0">全站搜索</option>
 <option value="1">素材搜索</option>
 <option value="2">設(shè)計(jì)欣賞</option>
 <option value="3">桌面壁紙</option>
 <option value="4">設(shè)計(jì)教程</option>
 </select>
 </div>
 <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() {$('#mySle').selectbox();});</script>
 </div>
 
 
 
</div>
</body>
</html>

效果演示源碼下載

運(yùn)行效果圖：

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊jquery下拉框效果匯總、JavaScript下拉框效果匯總進(jìn)行學(xué)習(xí)。

以上就是為大家分享的jquery實(shí)現(xiàn)select下拉框美化特效代碼，希望大家可以喜歡。

您可能感興趣的文章:

相關(guān)文章

JavaScript使用Promise封裝Axios進(jìn)行高效開發(fā)
這篇文章主要介紹了JavaScript使用Promise封裝Axios進(jìn)行高效開發(fā)，Axios是一個(gè)基于Promise的HTTP庫，它可以幫助我們更方便地發(fā)起HTTP請求，并且提供了許多高級功能，感興趣的同學(xué)可以參考下文
2023-05-05
JavaScript 驗(yàn)證碼的實(shí)例代碼(附效果圖)
JavaScript 驗(yàn)證碼的實(shí)例代碼(附效果圖)，需要的朋友可以參考一下
2013-03-03
uniapp 仿微信的右邊下拉選擇彈出框的實(shí)現(xiàn)代碼
這篇文章主要介紹了uniapp 仿微信的右邊下拉選擇彈出框的實(shí)現(xiàn)代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
詳解Bootstrap按鈕
本文給大家介紹bootstrap按鈕相關(guān)知識(shí)，包括按鈕大小、按鈕狀態(tài)、按鈕標(biāo)簽相關(guān)樣式定義，對bootstrap按鈕相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧
2016-01-01
js圖片上傳的封裝代碼
這篇文章主要為大家詳細(xì)介紹了js圖片上傳的封裝代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
cropper.js和exif.js實(shí)現(xiàn)頭像上傳縮放裁剪旋轉(zhuǎn)
這篇文章主要為大家詳細(xì)介紹了cropper.js和exif.js實(shí)現(xiàn)頭像上傳縮放裁剪旋轉(zhuǎn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-02-02
如何使用JS在HTML中自定義字符串格式化
在JavaScript中雖沒有類似的方法，但我們可以利用字符串的replace方法自定義字符串的格式化方法。下面通過本文給大家分享使用JS在HTML中自定義字符串格式化的方法，需要的的朋友參考下吧
2017-07-07
GRID拖拽行的實(shí)例代碼
這篇文章介紹了GRID拖拽行的實(shí)例代碼，有需要的朋友可以參考一下
2013-07-07
js 顯示日期時(shí)間的實(shí)例(時(shí)間過一秒加1)
下面小編就為大家?guī)硪黄猨s 顯示日期時(shí)間的實(shí)例(時(shí)間過一秒加1)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-10-10
js運(yùn)算符的一些特殊用法
這篇文章主要介紹了js運(yùn)算符的一些特殊用法,需要的朋友可以參考下
2018-07-07