類(lèi)似支付寶選擇銀行卡的圖片單選表單
作者：alixixi
像支付寶一樣，可以點(diǎn)銀行卡的圖片進(jìn)行選擇，然后有紅圈表示已經(jīng)選中的一款JS特效，分享一下。下面直接上圖和代碼僅供參考。
像支付寶一樣，可以點(diǎn)銀行卡的圖片進(jìn)行選擇，然后有紅圈表示已經(jīng)選中的一款JS特效，分享一下。
看一下效果預(yù)覽：
代碼部分：
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>無(wú)標(biāo)題文檔</title>
- <style type="text/css">
- .bank{background:url(http://js.alixixi.com/UploadPic/2012-6/20126161135670932.jpg); cursor:pointer; width:190px; height:36px; display:inline-block; text-indent:-999em; overflow:hidden; border:1px solid #dfdfdf; vertical-align:middle;}
- .gongshang{ background-position:-275px -204px;}
- .nongye{ background-position:-47px -204px;}
- .checked{ border:1px solid #f76b0c;}
- </style>
- </head>
- <body>
- <input type="radio" id="gongshang" name="bank" /> <label id="gongshang_label" for="gongshang" class="bank gongshang">中國(guó)工商銀行</label>
- <input type="radio" id="nongye" name="bank" /> <label id="nongye_label" for="nongye" class="bank nongye">中國(guó)農(nóng)業(yè)銀行</label>
- <script type="text/javascript">
- ra = document.getElementsByName('bank');
- len = ra.length;
- for(i=0;i<len;i++){
- ra[i].onclick = function(){
- la = document.getElementsByTagName('label');
- len2 = la.length;
- for(j=0;j<len2;j++){
- la[j].className = la[j].className.replace('checked','');
- }
- var label_id = this.getAttribute('id')+'_label';
- var label_obj = document.getElementById(label_id);
- label_obj.className+=" checked";
- }
- }
- </script>
- </body>
- </html>
責(zé)任編輯：張偉
來(lái)源：
阿里西西
