jQuery实现下拉框选择图片功能实例

本文实例讲述了jQuery实现下拉框选择图片功能。分享给大家供大家参考。具体如下：

让下拉框中显示图片，并可选择对应图片，让挑选下拉框不仅可显示文字，还可以显示图片内容。为了更生动些，这里还加入了jQuery动画效果，当展开挑选列表的时候，图片渐变显示。使用了一个日本季刊日本季刊插件：imageselect.js，使用效果的朋友可以自己下载吧。

运行效果截图如下：

具体代码如下：

！DOCTYPE htmlheadtitle支持图片选择的jQuery列表框插件imageselect.js/titlescript类型=' text/JAVAScript ' src=' http : jquery-1。6 .2 .量滴js /脚本脚本类型=' text/JavaScript ' src=' http :3358 Xia zai。JB 51。net/201508/马援/image select。js /脚本样式。{相对位置： }。jqis _ header { background-image : URL(//文件。JB 51。net/file _ images/article/201508/201588110650877。png ')；背景-位置：右中心；背景-重复：不重复；光标：指针；}.jqis_header img{cursor:指针；}.jqis _ dropdown { padding: 5px绝对位置：溢出-x:隐藏；溢出-y:滚动；}.jqis _下拉img { margin-right : 3px；光标：指针；向左浮动：}/样式/头体p请在下拉列表中选择：/PS选择名称=' logo '选项值=' 1 '/文件。JB 51。net/file _ images/article/201508/20158811102886。jpg/option选项值=' 2 '/文件。JB 51。net/file _ images/article/201588111047711。jpg/option选项值=' 3 '/文件。JB 51。net/file _ file ready(function(){ $(' select[name=logo]).图像选择({ drop down width :425 })；});/脚本/正文/html希望本文所述对大家的jquery程序设计有所帮助。