类似支付宝选择银行卡的图片单选表单

开发 前端
像支付宝一样,可以点银行卡的图片进行选择,然后有红圈表示已经选中的一款JS特效,分享一下。下面直接上图和代码仅供参考。

像支付宝一样,可以点银行卡的图片进行选择,然后有红圈表示已经选中的一款JS特效,分享一下。

看一下效果预览:

[[80493]] 

代码部分:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>无标题文档</title> 
  6. <style type="text/css"> 
  7. .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;}  
  8. .gongshang{ background-position:-275px -204px;}  
  9. .nongye{ background-position:-47px -204px;}  
  10. .checked{ border:1px solid #f76b0c;}  
  11. </style> 
  12.  
  13. </head> 
  14.  
  15. <body> 
  16. <input type="radio" id="gongshang" name="bank" /> <label  id="gongshang_label" for="gongshang" class="bank gongshang">中国工商银行</label> 
  17. <input type="radio" id="nongye" name="bank" /> <label  id="nongye_label" for="nongye" class="bank nongye">中国农业银行</label> 
  18. <script type="text/javascript"> 
  19.  ra = document.getElementsByName('bank');  
  20.  len = ra.length;  
  21.  for(i=0;i<len;i++){  
  22.  ra[i].onclick = function(){  
  23.   la = document.getElementsByTagName('label');  
  24.   len2 = la.length;  
  25.   for(j=0;j<len2;j++){  
  26.    la[j].className = la[j].className.replace('checked','');   
  27.   }  
  28.   var label_id = this.getAttribute('id')+'_label';  
  29.   var label_obj = document.getElementById(label_id);  
  30.   label_obj.className+=" checked";  
  31.   }  
  32. }  
  33.  
  34. </script> 
  35. </body> 
  36. </html> 

原文链接:http://js.alixixi.com/a/2012061681508.shtml

责任编辑:张伟 来源: 阿里西西
相关推荐

2015-03-11 10:30:52

Apple Pay

2015-08-04 11:08:31

2020-08-10 19:28:49

微信绑银行卡移动应用

2022-06-22 12:48:26

加密货币比特币加密卡

2014-03-11 16:52:20

2018-03-27 12:02:31

央行支付宝红包

2021-09-09 15:30:28

鸿蒙HarmonyOS应用

2021-01-25 14:13:26

iOS支付宝支付

2014-11-17 10:52:56

支付宝去阿里化

2011-04-21 11:27:42

Firefox支付宝

2014-12-05 13:19:59

2009-09-17 12:15:28

互联网

2015-06-02 11:35:53

2023-11-28 08:53:15

2018-03-27 10:51:29

微信支付宝银行

2017-12-05 09:00:05

移动支付微信支付宝

2010-01-11 08:39:42

2020-11-27 16:18:13

微信银行卡支付移动应用

2009-12-14 16:31:00

Linux安装支付宝

2009-11-23 10:02:22

PHP支付宝接口
点赞
收藏

51CTO技术栈公众号