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


Posted in Javascript onAugust 08, 2015

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

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

运行效果截图如下:

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

具体代码如下:

<!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.3water.com/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程序设计有所帮助。

Javascript 相关文章推荐
特殊字符、常规符号及其代码对照表
Jun 26 Javascript
改版了网上的一个js操作userdata
Apr 27 Javascript
jQuery 行级解析读取XML文件(附源码)
Oct 12 Javascript
用document.documentElement取代document.body的原因分析
Nov 12 Javascript
javascript中文本框中输入法切换的问题
Dec 10 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
Aug 09 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
Jan 23 Javascript
JS高仿抛物线加入购物车特效实现代码
Feb 20 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
Sep 12 Javascript
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
vue中element 的upload组件发送请求给后端操作
Sep 07 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
Oct 24 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
Aug 08 #Javascript
jQuery实现的Div窗口震动效果实例
Aug 07 #Javascript
jQuery实现时尚漂亮的弹出式对话框实例
Aug 07 #Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
Aug 07 #Javascript
jQuery基于ajax实现星星评论代码
Aug 07 #Javascript
jQuery实现网页抖动的菜单抖动效果
Aug 07 #Javascript
jQuery实现高亮显示网页关键词的方法
Aug 07 #Javascript
You might like
codeigniter教程之多文件上传使用示例
2014/02/11 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
PHP基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
判断浏览器的javascript版本的代码
2010/09/03 Javascript
setTimeout和setInterval的深入理解
2013/11/08 Javascript
JavaScript实现继承的4种方法总结
2014/10/16 Javascript
详谈JavaScript内存泄漏
2014/11/14 Javascript
javascript版2048小游戏
2015/03/18 Javascript
javascript中new关键字详解
2015/12/14 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
2016/01/23 Javascript
html5+javascript实现简单上传的注意细节
2016/04/18 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
Javascript实现简易天数计算器
2020/05/18 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
2020/09/24 Javascript
vue 封装面包屑组件教程
2020/11/16 Javascript
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
[01:05:12]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS CIS-GAME
2014/05/21 DOTA
Python代码调试的几种方法总结
2015/04/15 Python
python通过函数属性实现全局变量的方法
2015/05/16 Python
在Python 3中实现类型检查器的简单方法
2015/07/03 Python
利用Python获取赶集网招聘信息前篇
2016/04/18 Python
Python+Turtle动态绘制一棵树实例分享
2018/01/16 Python
python实现连连看辅助之图像识别延伸
2019/07/17 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
CSS3转换功能transform主要属性值分析及实现分享
2012/05/06 HTML / CSS
美国运动鞋和运动服零售商:Footaction
2017/04/07 全球购物
世界领先的电子书网站:eBooks.com(在线购买小说、非小说和教科书)
2019/03/30 全球购物
监理员的岗位职责
2013/11/13 职场文书
十月份红领巾广播稿
2014/01/22 职场文书
幼儿园的门卫岗位职责
2014/04/10 职场文书
交通事故协议书范文
2014/04/16 职场文书
保护环境倡议书300字
2014/05/19 职场文书
安全责任书范文
2014/08/25 职场文书
2015年初中元旦晚会活动总结
2014/11/28 职场文书
详解SpringBoot异常处理流程及原理
2021/06/21 Java/Android