search

Home  >  Article  >  Web Front-end  >  jQuery implementation of drop-down box image selection function example_jquery

jQuery implementation of drop-down box image selection function example_jquery

WBOY
WBOYOriginal
2016-05-16 15:46:181876browse

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>

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

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to center floating elements horizontally in css_javascript tipsNext article：How to center floating elements horizontally in css_javascript tips

Related articles

See more