Heim > Artikel > Web-Frontend > jQuery-Implementierung der Dropdown-Box-Bildauswahlfunktion example_jquery

jQuery-Implementierung der Dropdown-Box-Bildauswahlfunktion example_jquery

WBOYOriginal: 2016-05-16 15:46:181847Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie jQuery die Funktion der Auswahl von Bildern in einem Dropdown-Feld implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Lassen Sie das Dropdown-Feld Bilder anzeigen und wählen Sie die entsprechenden Bilder aus. Lassen Sie im Auswahl-Dropdown-Feld nicht nur Text, sondern auch den Bildinhalt anzeigen. Um es lebendiger zu machen, werden hier auch jQuery-Animationseffekte hinzugefügt. Wenn die Auswahlliste erweitert wird, wird das Bild schrittweise angezeigt. Es kommt ein jQ-Plugin zum Einsatz: imageselect.js Freunde, die den Effekt nutzen, können ihn selbst herunterladen.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Der spezifische Code lautet wie folgt:

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

Ich hoffe, dass dieser Artikel für das JQuery-Programmierungsdesign aller hilfreich sein wird.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Tipps zum horizontalen Zentrieren schwebender Elemente in css_javascriptNächster Artikel：Tipps zum horizontalen Zentrieren schwebender Elemente in css_javascript

In Verbindung stehende Artikel

Mehr sehen