像支付宝一样,可以点银行卡的图片进行选择,然后有红圈表示已经选中的一款JS特效,分享一下。
看一下效果预览:
代码部分:
- <!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>无标题文档</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">中国工商银行</label>
- <input type="radio" id="nongye" name="bank" /> <label id="nongye_label" for="nongye" class="bank nongye">中国农业银行</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>