首頁 > 開發者 > JavaScript
jQuery列表框外掛程式imageselect.js jquery select美化用圖片進行選擇
select預設的太難看了，在這用jquery 外掛程式imageselect.js進行美化，就圖片進行下拉式功能表的選擇
這個網頁特效代碼如下：
<!DOCTYPE html><head><title>支援圖片選擇的jQuery列表框外掛程式imageselect.js</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="jquery.min.1.7.1.js" ></script> <script type="text/javascript" src="imageselect.js"></script> <style>.jqis{position: relative;}.jqis_header{background-image: url('dropdown_arrow.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">wall_s5.jpg</option><option value="2">wall_s8.jpg</option><option value="3">wall_s7.jpg</option><option value="4">wall_s6.jpg</option></select><script type="text/javascript">$(document).ready(function(){$('select[name=logo]').ImageSelect({dropdownWidth:425});});</script></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
