Pelaksanaan jQuery fungsi pemilihan imej kotak lungsur example

Pelaksanaan jQuery fungsi pemilihan imej kotak lungsur example_jquery

WBOY

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

asal

1845 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara jQuery melaksanakan fungsi memilih imej dalam kotak lungsur. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Biarkan kotak lungsur memaparkan gambar, dan pilih gambar yang sepadan Biarkan kotak lungsur pilih bukan sahaja memaparkan teks, tetapi juga memaparkan kandungan gambar. Untuk menjadi lebih jelas, kesan animasi jQuery juga ditambah di sini Apabila senarai Pilih dikembangkan, gambar akan dipaparkan secara beransur-ansur. Pemalam jQ digunakan: imageselect.js Rakan yang menggunakan kesan itu boleh memuat turunnya sendiri.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Kod khusus adalah seperti berikut:

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

Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan jquery semua orang.