有时候我们想在支付页面设置多个支付样式,方便用户勾选,但是如果只是简单使用radio就不是很直观,就几个字,支付宝,网银在线的。不够直观。
所以就想做这么一个效果。
怎么还打了水印了。
我把代码发一下方便后期的使用。
直接把压缩包也发一下。这里不能发压缩包呢。那我就直接发代码了,不发压缩包了。
<!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=gb2312" />
<title>支付方式选择</title>
<style type="text/css">
.on{margin:5px;border:3px solid #F60;filter:alpha(Opacity=100)}
.off{margin:5px;border:1px solid #CCC;filter:alpha(Opacity=20)}
</style>
</head>
<body>
<script language="javascript">
function aa(a, b, c) {
//document.form1.img.value = a;
if(a==1)
{
document.getElementById("selectedinput").value="ZFB";
}
else if(a==2)
{
document.getElementById("selectedinput").value="WYZX";
}
document.getElementById("ZFMethods").getElementsByTagName("img")[a - 1].className = "on";
document.getElementById("ZFMethods").getElementsByTagName("img")[b - 1].className = "off";
document.getElementById("ZFMethods").getElementsByTagName("img")[c - 1].className = "off";
}
</script>
<h1>ddddddddddddddddddddddddddddddddd</h1>
<h1>ddddddddddddddddddddddddddddddddd</h1>
<h1>ddddddddddddddddddddddddddddddddd</h1>
<h1>ddddddddddddddddddddddddddddddddd</h1>
<div id="ZFMethods">
<a><img border="0" src="ZFB.jpg" name="01" οnclick=aa(1,2,3); class="off"></a>
<a><img border="0" src="WYZX.jpg" name="02" οnclick=aa(2,1,3); class="off"></a>
</div>
<input type=text id="selectedinput" value="这是选中的支付方式">
</body>
</html>