Maison > interface Web > js tutoriel > Une page de paiement DEMO avec screenshot_jquery

Une page de paiement DEMO avec screenshot_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Libérer: 2016-05-16 16:41:18
original
2127 Les gens l'ont consulté


Le code est le suivant :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

<!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" href="http://yanshi.bj8dream.com/static/xiaoniren/css/common.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!系统代理商</strong>

<span>欢迎您登录票务管理系统</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>元 (输入充值金额,不支持小数,最低 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="中国农业银行"></span>

<span class="bank-name">中国农业银行</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="中国建设银行"></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="中国建设银行"></span>

<span class="bank-name">中国建设银行</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="浦发银行"></span>

<span class="bank-name">浦发银行</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="确认充值" onclick="this.form.submit();" /></div>

</form>

</div>

 

</body>

</html>

Copier après la connexion
Étiquettes associées:
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal