cari

Rumah  >  Artikel  >  hujung hadapan web  >  Pelaksanaan jQuery fungsi pemilihan imej kotak lungsur example_jquery

Pelaksanaan jQuery fungsi pemilihan imej kotak lungsur example_jquery

WBOY
WBOYasal
2016-05-16 15:46:181876semak imbas

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>

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

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Bagaimana untuk memusatkan elemen terapung secara mendatar dalam petua css_javascriptArtikel seterusnya：Bagaimana untuk memusatkan elemen terapung secara mendatar dalam petua css_javascript

Artikel berkaitan

Lihat lagi