展会信息港展会大全

jQuery列表框插件imageselect.js jquery select美化用图片进行选择
来源:互联网   发布日期:2016-01-27 15:54:55   浏览:2857次  

导读:select默认的太难看了,在这用jquery 插件imageselect js进行美化,就图片进行下拉菜单的选择这个网页特效代码如下:!DOCTYPE htmlheadtitle支持图片选择的jQuery列表框插件imageselect js titlemeta ...

select默认的太难看了,在这用jquery 插件imageselect.js进行美化,就图片进行下拉菜单的选择

这个网页特效代码如下:

<!DOCTYPE html>

<head>

<title>支持图片选择的jQuery列表框插件imageselect.js</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="jquery.min.1.7.1.js" ></script>

<script type="text/javascript" src="imageselect.js"></script>

<style>

.jqis{position: relative;}

.jqis_header{background-image: url('dropdown_arrow.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">wall_s5.jpg</option>

<option value="2">wall_s8.jpg</option>

<option value="3">wall_s7.jpg</option>

<option value="4">wall_s6.jpg</option>

</select>

<script type="text/javascript">

$(document).ready(function(){

$('select[name=logo]').ImageSelect({dropdownWidth:425});

});

</script>

</body>

</html>

赞助本站

人工智能实验室

相关热词: 插件 图片 jQuery

相关内容
AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港