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 相关文章推荐
js数组Array sort方法使用深入分析
Feb 21 Javascript
使用JavaScript 实现各种跨域的方法
May 08 Javascript
js获取某月的最后一天日期的简单实例
Jun 22 Javascript
解析Javascript小括号“()”的多义性
Dec 03 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
Mar 13 Javascript
JS实现光滑展开合拢的菜单效果代码
Sep 16 Javascript
jQuery新窗口打开外链接
Jul 21 Javascript
JS实现瀑布流布局
Oct 21 Javascript
vue.js $refs和$emit 父子组件交互的方法
Dec 20 Javascript
vue系列之requireJs中引入vue-router的方法
Jul 18 Javascript
实例讲解JavaScript预编译流程
Jan 24 Javascript
js实现单元格拖拽效果
Feb 10 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
浅谈PHP变量作用域以及地址引用问题
2013/12/27 PHP
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
jquery nth-child()选择器的简单应用
2010/07/10 Javascript
jQuery实现HTML5 placeholder效果实例
2014/12/09 Javascript
JavaScript静态类型检查工具FLOW简介
2015/01/06 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
2015/02/03 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
2016/03/25 Javascript
mvc中form表单提交的三种方式(推荐)
2016/08/10 Javascript
Angular如何引入第三方库的方法详解
2017/07/13 Javascript
详解javascript中的babel到底是什么
2018/06/21 Javascript
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
2020/11/09 jQuery
[01:20:38]完美世界DOTA2联赛 GXR vs IO 第一场 11.07
2020/11/09 DOTA
python中实现php的var_dump函数功能
2015/01/21 Python
python创建和删除目录的方法
2015/04/29 Python
python 获取网页编码方式实现代码
2017/03/11 Python
浅谈使用Python内置函数getattr实现分发模式
2018/01/22 Python
Python标准库笔记struct模块的使用
2018/02/22 Python
python使用TensorFlow进行图像处理的方法
2018/02/28 Python
Python操作Excel插入删除行的方法
2018/12/10 Python
Python安装与基本数据类型教程详解
2019/05/29 Python
Python3自带工具2to3.py 转换 Python2.x 代码到Python3的操作
2021/03/03 Python
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
测试工程师岗位职责
2013/11/28 职场文书
总经理司机岗位职责
2014/02/06 职场文书
机电一体化求职信
2014/03/10 职场文书
求职简历自我评价范例
2014/03/12 职场文书
机电一体化专业求职信
2014/07/22 职场文书
授权委托书范本(单位)
2014/09/28 职场文书
人民调解协议书范本
2014/10/11 职场文书
2014年基建工作总结
2014/12/12 职场文书
员工自我工作评价
2015/03/06 职场文书
安全教育第一课观后感
2015/06/17 职场文书
2016党校学习心得体会范文
2016/01/07 职场文书
vue3如何优雅的实现移动端登录注册模块
2021/03/29 Vue.js
win10清理dns缓存
2022/04/19 数码科技