jQuery實現(xiàn)下拉框選擇圖片功能實例
更新時間：2015年08月08日 11:01:03 作者：皮蛋
這篇文章主要介紹了jQuery實現(xiàn)下拉框選擇圖片功能,可實現(xiàn)帶圖片的下拉列表功能,涉及jquery插件imageselect.js的使用,需要的朋友可以參考下
本文實例講述了jQuery實現(xiàn)下拉框選擇圖片功能。分享給大家供大家參考。具體如下：
讓下拉框中顯示圖片，并可選擇對應(yīng)圖片，讓select下拉框不僅可顯示文字，還可以顯示圖片內(nèi)容。為了更生動些，這里還加入了jQuery動畫效果，當(dāng)展開Select列表的時候，圖片漸變顯示。使用了一個jQ插件：imageselect.js，使用效果的朋友可以自己下載吧。
運行效果截圖如下：
具體代碼如下：
<!DOCTYPE html>
<head>
<title>支持圖片選擇的jQuery列表框插件imageselect.js</title>
<script type="text/javascript" src="jquery-1.6.2.min.js" ></script>
<script type="text/javascript" src="http://xiazai.jb51.net/201508/yuanma/imageselect.js"></script>
<style>
.jqis{position: relative;}
.jqis_header{background-image: url('//img.jbzj.com/file_images/article/201508/201588110650877.png');background-position: right center;background-repeat: no-repeat;cursor: pointer;}
.jqis_header img{cursor: pointer;}
.jqis_dropdown{padding: 5px;position: absolute;overflow-x: hidden;overflow-y: scroll;}
.jqis_dropdown img{margin-right: 3px;cursor: pointer;float: left;}
</style>
</head>
<body>
<p>請在下拉列表中選擇：</p>
<select name="logo">
<option value="1">//img.jbzj.com/file_images/article/201508/201588111102886.jpg</option>
<option value="2">//img.jbzj.com/file_images/article/201508/201588111047711.jpg</option>
<option value="3">//img.jbzj.com/file_images/article/201508/201588110953715.jpg</option>
<option value="4">//img.jbzj.com/file_images/article/201508/201588111003336.jpg</option>
</select>
<script type="text/javascript">
$(document).ready(function(){
$('select[name=logo]').ImageSelect({dropdownWidth:425});
});
</script>
</body>
</html>
希望本文所述對大家的jquery程序設(shè)計有所幫助。
您可能感興趣的文章:
- 基于jQuery的select下拉框選擇觸發(fā)事件實例分析
- jQuery插件實現(xiàn)可輸入和自動匹配的下拉框
- js和jquery分別驗證單選框、復(fù)選框、下拉框
- 自定義Angular指令與jQuery實現(xiàn)的Bootstrap風(fēng)格數(shù)據(jù)雙向綁定的單選與多選下拉框
- JQuery實現(xiàn)級聯(lián)下拉框效果實例講解
- jQuery+easyui中的combobox實現(xiàn)下拉框特效
- jQuery制作簡潔的多級聯(lián)動Select下拉框
- 基于jquery實現(xiàn)的可編輯下拉框?qū)崿F(xiàn)代碼
- jQuery操作select下拉框的text值和value值的方法
- jquery獲取下拉框中的循環(huán)值
相關(guān)文章
本篇文章是對JQuery.Ajax中的錯誤調(diào)試幫助信息進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-07-07
這篇文章主要介紹了jquery分析文本里url或郵件地址為真實鏈接的方法,涉及jQuery正則匹配與替換的相關(guān)技巧,需要的朋友可以參考下2015-06-06
因為要給新員工進(jìn)行培訓(xùn)jQuery.UI方面的內(nèi)容，我之前學(xué)習(xí)的都是jquery.ui-1.6b的，現(xiàn)在的版本升級到j(luò)query-ui-1.7.1，除了樣式上有很大調(diào)整以外，API也有了很大的變化。2009-08-08
JQuery搜索框自動補全(模糊匹配)功能實現(xiàn)示例
這篇文章主要介紹了JQuery搜索框自動補全(模糊匹配)功能實現(xiàn)示例沒使用JQuery UI的autocomplete插件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-01-01
jquery簡單導(dǎo)航實現(xiàn)代碼，需要的朋友可以參考下。2009-09-09
這篇文章主要為大家詳細(xì)介紹了Jquery Easyui自定義下拉框組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
JQuery移動頁面開發(fā)之屏幕方向改變與滾屏的實現(xiàn)
這篇文章主要介紹了JQuery移動頁面開發(fā)之隨屏幕方向改變與滾屏的實現(xiàn),通過相關(guān)兩個事件的添加來達(dá)到響應(yīng)移動設(shè)備上操作的效果,需要的朋友可以參考下2015-12-12
拓展一個點擊按鈕自動高亮的原理很簡單，在點擊的時候給元素加上一個自定義的attr，具體實現(xiàn)祥看本文2014-04-04
jquery+ajaxform+springboot控件實現(xiàn)數(shù)據(jù)更新功能
這篇文章主要介紹了jquery+ajaxform+springboot控件實現(xiàn)數(shù)據(jù)更新操作,使用jquery的ajaxform插件是一個比較不錯的選擇。具體實現(xiàn)工程大家參考下本文2018-01-01
這篇文章主要介紹了jQuery實現(xiàn)的簡單歌詞滾動功能,結(jié)合實例形式分析了基于jQuery插件scroll.js實現(xiàn)滾動功能相關(guān)操作技巧,涉及jQuery結(jié)合時間函數(shù)動態(tài)操作頁面元素相關(guān)實現(xiàn)方法,需要的朋友可以參考下2019-01-01