jQuery implementation of drop-down box image selection function example

jQuery implementation of drop-down box image selection function example_jquery

WBOY

Release： 2016-05-16 15:46:18

Original

1878 people have browsed it

The example in this article describes how jQuery implements the function of selecting images in a drop-down box. Share it with everyone for your reference. The details are as follows:

Let the drop-down box display pictures, and select the corresponding pictures. Let the select drop-down box not only display text, but also display the picture content. In order to be more vivid, jQuery animation effects are also added here. When the Select list is expanded, the picture will be displayed gradually. A jQ plug-in is used: imageselect.js. Friends who use the effect can download it themselves.

The screenshot of the running effect is as follows:

The specific code is as follows:

<!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.jb51.net/201508/yuanma/imageselect.js"></script> 
<style>
.jqis{position: relative;}
.jqis_header{background-image: url('http://files.jb51.net/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">http://files.jb51.net/file_images/article/201508/201588111102886.jpg</option>
<option value="2">http://files.jb51.net/file_images/article/201508/201588111047711.jpg</option>
<option value="3">http://files.jb51.net/file_images/article/201508/201588110953715.jpg</option>
<option value="4">http://files.jb51.net/file_images/article/201508/201588111003336.jpg</option>
</select>
<script type="text/javascript">
  $(document).ready(function(){
    $('select[name=logo]').ImageSelect({dropdownWidth:425});
  });
</script>
</body>
</html>

Copy after login

I hope this article will be helpful to everyone’s jquery programming design.