Implémentation jQuery de la fonction de sélection d'image par liste déroulante example

Implémentation jQuery de la fonction de sélection d'image par liste déroulante example_jquery

WBOY

Libérer： 2016-05-16 15:46:18

original

1851 Les gens l'ont consulté

L'exemple de cet article décrit comment jQuery implémente la fonction de sélection d'images dans une liste déroulante. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Laissez la liste déroulante afficher les images et sélectionnez les images correspondantes. Laissez la liste déroulante de sélection afficher non seulement le texte, mais également le contenu de l'image. Afin d'être plus vivant, des effets d'animation jQuery sont également ajoutés ici. Lorsque la liste de sélection est développée, l'image s'affiche progressivement. Un plug-in jQ est utilisé : imageselect.js. Les amis qui utilisent l'effet peuvent le télécharger eux-mêmes.

La capture d'écran de l'effet en cours d'exécution est la suivante :

Le code spécifique est le suivant :

<!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>

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation jquery de chacun.