快捷導(dǎo)航

jQuery實(shí)現(xiàn)下拉框選擇圖片功能實(shí)例

更新時(shí)間：2015年08月08日 11:01:03 作者：皮蛋

這篇文章主要介紹了jQuery實(shí)現(xiàn)下拉框選擇圖片功能,可實(shí)現(xiàn)帶圖片的下拉列表功能,涉及jquery插件imageselect.js的使用,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)下拉框選擇圖片功能。分享給大家供大家參考。具體如下：

讓下拉框中顯示圖片，并可選擇對(duì)應(yīng)圖片，讓select下拉框不僅可顯示文字，還可以顯示圖片內(nèi)容。為了更生動(dòng)些，這里還加入了jQuery動(dòng)畫效果，當(dāng)展開Select列表的時(shí)候，圖片漸變顯示。使用了一個(gè)jQ插件：imageselect.js，使用效果的朋友可以自己下載吧。

運(yùn)行效果截圖如下：

具體代碼如下：

<!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>請(qǐng)?jiān)谙吕斜碇羞x擇：</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>

希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

JQuery.Ajax之錯(cuò)誤調(diào)試幫助信息介紹
本篇文章是對(duì)JQuery.Ajax中的錯(cuò)誤調(diào)試幫助信息進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下
2013-07-07
jquery分析文本里url或郵件地址為真實(shí)鏈接的方法
這篇文章主要介紹了jquery分析文本里url或郵件地址為真實(shí)鏈接的方法,涉及jQuery正則匹配與替換的相關(guān)技巧,需要的朋友可以參考下
2015-06-06
jQuery ui 1.7更新小結(jié)
因?yàn)橐o新員工進(jìn)行培訓(xùn)jQuery.UI方面的內(nèi)容，我之前學(xué)習(xí)的都是jquery.ui-1.6b的，現(xiàn)在的版本升級(jí)到j(luò)query-ui-1.7.1，除了樣式上有很大調(diào)整以外，API也有了很大的變化。
2009-08-08
JQuery搜索框自動(dòng)補(bǔ)全(模糊匹配)功能實(shí)現(xiàn)示例
這篇文章主要介紹了JQuery搜索框自動(dòng)補(bǔ)全(模糊匹配)功能實(shí)現(xiàn)示例沒使用JQuery UI的autocomplete插件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-01-01
jquery 簡(jiǎn)單導(dǎo)航實(shí)現(xiàn)代碼
jquery簡(jiǎn)單導(dǎo)航實(shí)現(xiàn)代碼，需要的朋友可以參考下。
2009-09-09
Jquery Easyui自定義下拉框組件使用詳解（21）
這篇文章主要為大家詳細(xì)介紹了Jquery Easyui自定義下拉框組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
JQuery移動(dòng)頁(yè)面開發(fā)之屏幕方向改變與滾屏的實(shí)現(xiàn)
這篇文章主要介紹了JQuery移動(dòng)頁(yè)面開發(fā)之隨屏幕方向改變與滾屏的實(shí)現(xiàn),通過(guò)相關(guān)兩個(gè)事件的添加來(lái)達(dá)到響應(yīng)移動(dòng)設(shè)備上操作的效果,需要的朋友可以參考下
2015-12-12
Jquery 點(diǎn)擊按鈕自動(dòng)高亮實(shí)現(xiàn)原理及代碼
拓展一個(gè)點(diǎn)擊按鈕自動(dòng)高亮的原理很簡(jiǎn)單，在點(diǎn)擊的時(shí)候給元素加上一個(gè)自定義的attr，具體實(shí)現(xiàn)祥看本文
2014-04-04
jquery+ajaxform+springboot控件實(shí)現(xiàn)數(shù)據(jù)更新功能
這篇文章主要介紹了jquery+ajaxform+springboot控件實(shí)現(xiàn)數(shù)據(jù)更新操作,使用jquery的ajaxform插件是一個(gè)比較不錯(cuò)的選擇。具體實(shí)現(xiàn)工程大家參考下本文
2018-01-01
jQuery實(shí)現(xiàn)的簡(jiǎn)單歌詞滾動(dòng)功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡(jiǎn)單歌詞滾動(dòng)功能,結(jié)合實(shí)例形式分析了基于jQuery插件scroll.js實(shí)現(xiàn)滾動(dòng)功能相關(guān)操作技巧,涉及jQuery結(jié)合時(shí)間函數(shù)動(dòng)態(tài)操作頁(yè)面元素相關(guān)實(shí)現(xiàn)方法,需要的朋友可以參考下
2019-01-01