一個支付頁面DEMO附截圖
更新時間：2014年07月22日 11:25:25 投稿：whsnow
這是一個支付頁面DEMO，有截圖，非常逼真，感興趣的朋友可以參考下
代碼如下：
<!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" />
<link rel="stylesheet" type="text/css" rel="external nofollow" />
<base target="_self" />
<title>思瑜科技在線充值</title>
<script type="text/javascript" src="http://yanshi.bj8dream.com/static/xiaoniren/js/jQuery_v172_min.js"></script>
<style type="text/css">
/* Bank Select */
.ui-list-icons li { float:left; margin:0px 10px 25px 0px; width:218px; padding-right:10px; display:inline; }
.ui-list-icons li input { vertical-align:middle; }
.ui-list-icons li .icon-box { cursor:pointer; width:190px; background:#FFF; line-height:36px; border:1px solid #DDD; vertical-align:middle; position:relative; display:inline-block; zoom:1; }
.ui-list-icons li .icon-box.hover, .ui-list-icons li .icon-box.current { border:1px solid #FA3; }
.ui-list-icons li .icon-box-sparkling { position:absolute; top:-18px; left:0px; height:14px; line-height:14px; }
.ui-list-icons li .icon { float:left; width:126px; padding:0px; height:36px; display:block; line-height:30px; color:#07f; font-weight:bold; white-space:nowrap; overflow:hidden; position:relative; z-index:1; }
.ui-list-icons li .bank-name { position:absolute; left:5px; z-index:0; height:36px; width:121px; overflow:hidden; }
/* Bank Background */
.ui-list-icons li .ABC, .ui-list-icons li .ICBC, .ui-list-icons li .CCB, .ui-list-icons li .PSBC,
.ui-list-icons li .BOC, .ui-list-icons li .CMB, .ui-list-icons li .COMM, .ui-list-icons li .SPDB,
.ui-list-icons li .CEB { background:#FFF url(images/ICBC_bank.gif) no-repeat 5px center; }
/* Bank Submit */
.paybok { padding:0px 0px 0px 20px; }
.paybok .csbtx { border-radius:3px; color:#FFF; font-weight:bold; }
</style>
<script type="text/javascript">
$(function(){
//Bank Hover
$('.ui-list-icons > li').hover(function(){
$(this).children('.icon-box').addClass('hover');
}, function(){
$(this).children('.icon-box').removeClass('hover');
});
//Bank Click
$('.ui-list-icons > li').click(function(){
for ( var i=0; i<$('.ui-list-icons > li').length; i++ ){
$('.ui-list-icons > li').eq(i).children('.icon-box').removeClass('current');
}
$(this).children('.icon-box').addClass('current');
});
})
</script>
</head>
<body>
<div class="paying">
<p class="paytit">
<strong>您好，fx！系統(tǒng)代理商</strong>
<span>歡迎您登錄票務(wù)管理系統(tǒng)</span>
<em>賬戶余額：￥81291.00元</em>
<i>已消費：￥64521元</i>
</p>
<form action="/huayi_test/order/charge.php" method="post" class="validator" name="f" onsubmit="return chongzhi();" >
<div class="payamont">
<input type="text" id="money" name="money" value="" />
<span>元 （輸入充值金額，不支持小數(shù)，最低 500元）</span>
</div>
<div class="clr"></div>
<ul class="ui-list-icons clrfix">
<li>
<input type="radio" name="bank" id="ABC" value="" checked="checked">
<label class="icon-box current" for="ABC">
<span class="icon-box-sparkling" bbd="false"> </span>
<span class="false icon ABC" title="中國農(nóng)業(yè)銀行"></span>
<span class="bank-name">中國農(nóng)業(yè)銀行</span>
</label>
</li>
<li>
<input type="radio" name="bank" id="ICBC" value="">
<label class="icon-box" for="ICBC">
<span class="icon-box-sparkling" bbd="false"> </span>
<span class="false icon ICBC" title="中國工商銀行"></span>
<span class="bank-name">中國工商銀行</span>
</label>
</li>
<li>
<input type="radio" name="bank" id="CCB" value="">
<label class="icon-box" for="CCB">
<span class="icon-box-sparkling" bbd="false"> </span>
<span class="false icon CCB" title="中國建設(shè)銀行"></span>
<span class="bank-name">中國建設(shè)銀行</span>
</label>
</li>
<li>
<input type="radio" name="bank" id="CCB" value="">
<label class="icon-box" for="CCB">
<span class="icon-box-sparkling" bbd="false"> </span>
<span class="false icon CCB" title="中國建設(shè)銀行"></span>
<span class="bank-name">中國建設(shè)銀行</span>
</label>
</li>
<li>
<input type="radio" name="bank" id="PSBC" value="">
<label class="icon-box" for="PSBC">
<span class="icon-box-sparkling" bbd="false"> </span>
<span class="false icon PSBC" title="中國郵政儲蓄銀行"></span>
<span class="bank-name">中國郵政儲蓄銀行</span>
</label>
</li>
<li>
<input type="radio" name="bank" id="BOC" value="">
<label class="icon-box" for="BOC">
<span class="icon-box-sparkling" bbd="false"> </span>
<span class="false icon BOC" title="中國銀行"></span>
<span class="bank-name">中國銀行</span>
</label>
</li>
<li>
<input type="radio" name="bank" id="CMB" value="">
<label class="icon-box" for="CMB">
<span class="icon-box-sparkling" bbd="false"> </span>
<span class="false icon CMB" title="招商銀行"></span>
<span class="bank-name">招商銀行</span>
</label>
</li>
<li>
<input type="radio" name="bank" id="COMM" value="">
<label class="icon-box" for="COMM">
<span class="icon-box-sparkling" bbd="false"> </span>
<span class="false icon COMM" title="交通銀行"></span>
<span class="bank-name">交通銀行</span>
</label>
</li>
<li>
<input type="radio" name="bank" id="SPDB" value="">
<label class="icon-box" for="SPDB">
<span class="icon-box-sparkling" bbd="false"> </span>
<span class="false icon SPDB" title="浦發(fā)銀行"></span>
<span class="bank-name">浦發(fā)銀行</span>
</label>
</li>
<li>
<input type="radio" name="bank" id="CEB" value="">
<label class="icon-box" for="CEB">
<span class="icon-box-sparkling" bbd="false"> </span>
<span class="false icon CEB" title="中國光大銀行"></span>
<span class="bank-name">中國光大銀行</span>
</label>
</li>
</ul>
<div class="paybok"><input class="csbtx" type="button" value="確認(rèn)充值" onclick="this.form.submit();" /></div>
</form>
</div>
</body>
</html>
相關(guān)文章
聊一聊jQuery插件uploadify使用方法，這篇文章主要總結(jié)了uploadify使用的一些經(jīng)驗，感興趣的小伙伴們可以參考一下2016-08-08
本文詳細(xì)介紹下使用JQuery實現(xiàn)圖片的展開和伸縮，感興趣的朋友可以參考下哈，希望可以幫助到你2013-04-04
這篇文章主要介紹了jquery高級編程的最佳實踐詳解,學(xué)習(xí)JQ的朋友一定需要這個，參考下吧2014-03-03
這篇文章主要介紹了jQuery和CSS仿京東仿淘寶列表導(dǎo)航菜單，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
jquery實現(xiàn)帶漸變淡入淡出并向右依次展開的多級菜單效果實例
這篇文章主要介紹了jquery實現(xiàn)帶漸變淡入淡出并向右依次展開的多級菜單效果,涉及jquery鼠標(biāo)事件及頁面元素動態(tài)樣式設(shè)置的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
jQuery+JSON+jPlayer實現(xiàn)QQ空間音樂查詢功能示例
本文為大家介紹下jQuery+JSON+jPlayer實現(xiàn)QQ空間音樂查詢，具體的實現(xiàn)過程感興趣的朋友可以了解下哈，希望對大家有所幫助2013-06-06
javascript 自定義回調(diào)函數(shù)示例代碼
使用函數(shù)做參數(shù)就有下面的好處：當(dāng)你a(b)的時候函數(shù)b就成了回調(diào)函數(shù)，而你還可以a(c)這個時候，函數(shù)c就成了回調(diào)函數(shù)2014-09-09
這篇文章主要介紹了jQuery實現(xiàn)新聞播報滾動及淡入淡出效果,結(jié)合實例形式分析了基于jQuery插件的頁面元素動態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下2018-03-03
將JavaScript的jQuery庫中表單轉(zhuǎn)化為JSON對象的方法
這篇文章主要介紹了將JavaScript的jQuery庫中表單轉(zhuǎn)化為JSON對象的方法,包括對序列化時空格問題的處理方法,需要的朋友可以參考下2015-11-11
jQuery UI插件自定義confirm確認(rèn)框的方法
這篇文章主要介紹了jQuery UI插件自定義confirm確認(rèn)框的方法,實例分析了jQuery的UI插件使用技巧,非常具有實用價值,需要的朋友可以參考下2015-03-03