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 Replace()的高级使用方法介绍
Jun 29 Javascript
js获取当月最后一天实例代码
Nov 19 Javascript
javascript无刷新评论实现方法
May 13 Javascript
JS事件添加和移出的兼容写法示例
Jun 20 Javascript
JavaScript实现打地鼠小游戏
Apr 23 Javascript
使用JavaScript根据图片获取条形码的方法
Jul 04 Javascript
react-router4 嵌套路由的使用方法
Jul 24 Javascript
解决React Native端口号修改的方法
Jul 28 Javascript
原生JS进行前后端同构
Apr 22 Javascript
详解Vue2.0组件的继承与扩展
Nov 23 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
Sep 17 Javascript
vue实现点击追加选中样式效果
Nov 01 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数学运算
2011/12/30 PHP
php生成二维码的几种方式整理及使用实例
2013/06/03 PHP
基于PHP对XML的操作详解
2013/06/07 PHP
浅析php中抽象类和接口的概念以及区别
2013/06/27 PHP
微信扫描二维码登录网站代码示例
2013/12/30 PHP
php array_walk 对数组中的每个元素应用用户自定义函数详解
2016/11/18 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题
2007/01/09 Javascript
javascript css在IE和Firefox中区别分析
2009/02/18 Javascript
查找iframe里元素的方法可传参
2013/09/11 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
2013/12/20 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
2014/05/05 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
2015/08/24 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
2015/09/19 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
2016/03/06 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
js时间查询插件使用详解
2017/04/07 Javascript
vue中的非父子间的通讯问题简单的实例代码
2017/07/19 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
2018/07/31 Javascript
vue实现倒计时获取验证码效果
2020/04/17 Javascript
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
Python中用pycurl监控http响应时间脚本分享
2015/02/02 Python
python查询mysql,返回json的实例
2018/03/26 Python
python使用xlrd模块读取xlsx文件中的ip方法
2019/01/11 Python
Python简直是万能的,这5大主要用途你一定要知道!(推荐)
2019/04/03 Python
Python利用lxml模块爬取豆瓣读书排行榜的方法与分析
2019/04/15 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
Python内置函数property()如何使用
2020/09/01 Python
澳大利亚牛仔裤商店:Just Jeans
2016/10/13 全球购物
快递业务员岗位职责
2014/01/06 职场文书
三年大学自我鉴定
2014/01/16 职场文书
新闻发布会策划方案
2014/06/12 职场文书
大学迎新标语
2014/06/26 职场文书
2014年宣传思想工作总结
2014/12/10 职场文书
2014社区健康教育工作总结
2014/12/16 职场文书
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python