经验分享程序开发文档资料数据资源其它资源

jQuery适应移动端选择银行下拉列表js代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery适应移动端选择银行下拉列表js代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery适应移动端选择银行下拉列表js代码

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="">
<meta name="renderer" content="webkit">
<link rel="icon" href="images/favicon.ico">
<title>jQuery适应移动端选择银行下拉列表</title>
<link href="css/bs.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">

</head>
<body class="bg-f2">
<div class="container-fluid" id="con">
<div class="row bg-fff  par-top-40 pad-right-15" id="bank_show1"  >
	<table class="table">
		<tr>
			<td class="form_td border-none td_bot" >姓名</td><td class="border-none td_bot"><input type="text" class="form-control" placeholder="请输入姓名"/></td>
		</tr>
		<tr>
			<td class="form_td border-none td_bot">身份证号</td><td class="border-none td_bot"><input type="text" class="form-control" placeholder="请输入身份证号"/></td>
		</tr>
		<tr>
			<td class="form_td border-none td_bot">选择银行</td>
			<td class="border-none td_bot">
				<div class="position-rel">
					<div class="position-rel">
						<input type="text" id="chose_input"   class="form-control" placeholder="--储蓄卡--"/>
						<div class="bank_xljt"><img class="jt_xz" width="20" src="images/jtx.png" alt=""/></div>
						<div id="chose_bank" class="bank_xljt1"></div>
					</div>
					<div class="bank_xl" style="display: none">
						<ul>

							<li class="hotBank-list">
								<a href="javascript:" class="hotBank-list-ico "  title="中国农业银行">
									<img src="images/zs1.png" width="150" alt=""/>
								</a>
							</li>
							<li class="hotBank-list">
								<a href="javascript:" class="hotBank-list-ico "  title="中国建设银行">
									<img src="images/zs2.png" width="150" alt=""/>
								</a>
							</li>
							<li class="hotBank-list">
								<a href="javascript:" class="hotBank-list-ico "  title="中国工商银行">
									<img src="images/zs3.png" width="150" alt=""/>
								</a>
							</li>
							<li class="hotBank-list">
								<a href="javascript:" class="hotBank-list-ico "  title="中国银行">
									<img src="images/zs4.png" width="150" alt=""/>
								</a>
							</li>
							<li class="hotBank-list">
								<a href="javascript:" class="hotBank-list-ico "  title="中国光大银行">
									<img src="images/zs5.png" width="150" alt=""/>
								</a>
							</li>
							<li class="hotBank-list">
								<a href="javascript:" class="hotBank-list-ico "  title="华夏银行">
									<img src="images/zs6.png" width="150" alt=""/>
								</a>
							</li>
							<li class="hotBank-list">
								<a href="javascript:" class="hotBank-list-ico "  title="中国民生银行">
									<img src="images/zs7.png" width="150" alt=""/>
								</a>
							</li>
							<li class="hotBank-list">
								<a href="javascript:" class="hotBank-list-ico "  title="平安银行">
									<img src="images/zs8.png" width="150" alt=""/>
								</a>
							</li>
							<li class="hotBank-list">
								<a href="javascript:" class="hotBank-list-ico "  title="兴业银行">
									<img src="images/zs9.png" width="150" alt=""/>
								</a>
							</li>
						</ul>
					</div>
				</div>
		   </td>
		</tr>

	</table>

</div>

</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bs.js"></script>
<script>
$(function(){

//        下拉银行卡

	$(".hotBank-list-ico").bind('click',function(){
	   $('#chose_input').val($(this).attr('title'));
		$('.bank_xl').hide();
		$("#chose_bank").parent('div').find('img').addClass('jt_xz');
	});
	$("#chose_bank").click(function(){
		$('.bank_xl').show();
		$("#chose_bank").parent('div').find('img').removeClass('jt_xz');
	});
//        下拉银行卡

})
</script>
<script>
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
	var msViewportStyle = document.createElement('style')
	msViewportStyle.appendChild(
			document.createTextNode(
					'@-ms-viewport{width:auto!important}'
			)
	)
	document.querySelector('head').appendChild(msViewportStyle)
}
</script>
</body>
</html>

CSS代码(index.css):

@charset "utf-8";/* reset */
body{font-family:"Microsoft YaHei","微软雅黑",helvetica,arial,verdana,tahoma,sans-serif;background:#fff;max-width:640px;margin:0 auto;}
#con{padding-bottom:90px;}
.mar-top-0{margin-top:0px;}
.mar-top-3{margin-top:3px;}
.mar-top-5{margin-top:5px;}
.mar-top-10{margin-top:10px;}
.mar-top-15{margin-top:15px;}
.mar-top-20{margin-top:20px;}
.mar-top-25{margin-top:25px;}
.mar-top-30{margin-top:30px;}
.mar-top-40{margin-top:40px;}
.mar-right-3{margin-right:3px;}
.mar-right-5{margin-right:5px;}
.mar-right-10{margin-right:10px;}
.mar-right-15{margin-right:15px;}
.mar-right-20{margin-right:20px;}
.mar-right-25{margin-right:25px;}
.mar-right-30{margin-right:30px;}
.mar-right-40{margin-right:40px;}
.mar-bot-0{margin-bottom:0px !important;}
.mar-bot-3{margin-bottom:3px;}
.mar-bot-5{margin-bottom:5px;}
.mar-bot-10{margin-bottom:10px;}
.mar-bot-15{margin-bottom:15px;}
.mar-bot-20{margin-bottom:20px;}
.mar-bot-25{margin-bottom:25px;}
.mar-bot-30{margin-bottom:30px;}
.mar-bot-40{margin-bottom:40px;}
.mar-left-3{margin-left:3px;}
.mar-left-5{margin-left:5px;}
.mar-left-10{margin-left:10px;}
.mar-left-15{margin-left:15px;}
.mar-left-20{margin-left:20px;}
.mar-left-25{margin-left:25px;}
.mar-left-30{margin-left:30px;}
.mar-left-40{margin-left:40px;}
.mar-left-70{margin-left:70px;}
.mar-left-90{margin-left:90px;}
.mar-left-110{margin-left:110px;}
.mar-0{margin:0px;}
.mar-3{margin:3px;}
.mar-5{margin:5px;}
.mar-10{margin:10px;}
.pad-top-3{padding-top:3px;}
.pad-top-5{padding-top:5px;}
.pad-top-10{padding-top:10px;}
.pad-top-15{padding-top:15px;}
.pad-top-20{padding-top:20px;}
.pad-top-25{padding-top:25px;}
.pad-top-30{padding-top:30px;}
.pad-top-40{padding-top:30px;}
.pad-right-3{padding-right:3px;}
.pad-right-5{padding-right:5px;}
.pad-right-10{padding-right:10px;}
.pad-right-15{padding-right:15px;}
.pad-right-20{padding-right:20px;}
.pad-right-25{padding-right:25px;}
.pad-right-30{padding-right:30px;}
.pad-right-40{padding-right:30px;}
.pad-bot-3{padding-bottom:3px;}
.pad-bot-5{padding-bottom:5px;}
.pad-bot-10{padding-bottom:10px;}
.pad-bot-15{padding-bottom:15px;}
.pad-bot-20{padding-bottom:20px;}
.pad-bot-25{padding-bottom:25px;}
.pad-bot-30{padding-bottom:30px;}
.pad-bot-40{padding-bottom:30px;}
.pad-left-3{padding-left:3px;}
.pad-left-5{padding-left:5px;}
.pad-left-10{padding-left:10px;}
.pad-left-15{padding-left:15px;}
.pad-left-20{padding-left:20px;}
.pad-left-25{padding-left:25px;}
.pad-left-30{padding-left:30px;}
.pad-left-40{padding-left:30px;}
.pad-0{padding:0px;}
.pad-5{padding:5px;}
.pad-10{padding:10px;}
.pad-15{padding:15px;}
.pad-20{padding:20px;}
.pad-lr-20{padding:auto 20px;}
.dis-inline{display:inline;}
.dis-block{display:block;}
.dis-none{display:none;}
.hide{visibility:hidden;}
.show{visibility:visible;}
.position-abs{position:absolute;}
.position-rel{position:relative;}
.v-top{vertical-align:top;}
.v-middle{vertical-align:middle;}
.bold{font-weight:bold;}
.l-red{color:#e63e3e;}
.l-blue{color:#02a7ff;}
.gray{color:#333;}
.gray-light{color:#999;}
.red{color:#ff4444;}
.white{color:#fff;}
.green{color:#f6ad1c !important;}
.color-green{color:#27d9a0;}
.black{color:#000;}
.text-muted{color:#555;}
h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,.h1 small,.h2 small,.h3 small,.h4 small,.h5 small,.h6 small,h1 .small,h2 .small,h3 .small,h4 .small,h5 .small,h6 .small,.h1 .small,.h2 .small,.h3 .small,.h4 .small,.h5 .small,.h6 .small{color:#777;}
span.red{font-size:14px !important;}
.bg-l-red{background:#e63e3e;}
.bg-l-blue{background:#02a7ff;}
.bg-l-green{background:#27d9a0;}
.bg-fff{background:#fff;}
.bg-f2{background:#f2f2f2;}
.bg-f1{background:#f1f1f1;}
.bg-333{background:#333;}
.bg-999{background:#333;}
.border-right{border-right:1px solid #ccc;}
.btn-red,.btn-red:visited{background:#e63e3e;color:#fff;}
.btn-red:hover{background:#e85657;color:#fff;}
.btn-blue,.btn-blue:visited{background:#00a8ff;color:#fff;}
.btn-blue:hover{background:#00b1ff;color:#fff;}
.btn-gray,.btn-gray:visited{background:#ccc;color:#fff;}
.btn-gray:hover{background:#bbb;color:#fff;}
.btn-green{background:#f6ad1c;border:none;font-size:18px;color:#fff;}
.btn-green:hover{background:#f6ad1c;color:#fff;}
.button-green{background:#27d9a0;color:#fff;}
.button-green:hover{background:#27d9a0;color:#fff;}
.btn-qx{background:#fff !important;border:1px solid #27d9a0 !important;}
.btn-ls{background:#f6ad1c !important;color:#fff;}
.text-indent-0{text-indent:0em;}
.text-indent-2{text-indent:2em;}
.text-indent-5{text-indent:0.5em;}
.text-indent-25{text-indent:-2.5em;}
.text-indent-45{text-indent:-4.5em;}
.line-height-160{line-height:160%;}
.border-none{border:none !important;}
table.border-none tr td{border:none;}
.border-qx{border-bottom:1px dashed #ccc !important;}
.border-sx{border-bottom:1px solid #ccc !important;}
.border-sxf1{border-bottom:1px solid #f1f1f1 !important;}
.checkbox{cursor:pointer;}
.cur-poi{cursor:pointer;}
textarea{resize:none;}
ul,li{list-style:none;margin:0;padding:0;}
.f18{font-size:18px;}
.f20{font-size:20px !important;}
.f12{font-size:12px !important;}
.f16{font-size:16px !important;}
.pos-5{position:relative;top:-5px !important;}
.pos-3{position:relative;top:-3px !important;}
.pos-2{position:relative;top:-2px !important;}
.pos-1{position:relative;top:-1px !important;}
.color-ccc{color:#CCCCCC;}
.color-a{color:#aaaaaa!important;}
.color-32{color:#323232 !important;}
.color-64{color:#646464;}
.bg-none{background:none !important;}
.orange{color:#f6ad1c;}
/* function */
.f-cb:after,.f-cbli li:after{display:block;clear:both;visibility:hidden;height:0;overflow:hidden;content:".";}
.f-cb,.f-cbli li{zoom:1;}
.f-ib{display:inline-block;*display:inline;*zoom:1;}
.f-dn{display:none;}
.f-db{display:block;}
.f-fl{float:left;}
.f-fr{float:right;}
.f-pr{position:relative;}
.f-prz{position:relative;zoom:1;}
.f-oh{overflow:hidden;}
.f-fs1{font-size:12px;}
.f-fs2{font-size:14px;}
.f-fwn{font-weight:normal;}
.f-fwb{font-weight:bold;}
.f-tal{text-align:left !important;}
.f-tac{text-align:center;}
.f-tar{text-align:right;}
.f-vam,.f-vama *{vertical-align:middle;}
.f-wsn{word-wrap:normal;white-space:nowrap;}
.f-pre{overflow:hidden;text-align:left;white-space:pre-wrap;word-wrap:break-word;word-break:break-all;}
.f-wwb{white-space:normal;word-wrap:break-word;word-break:break-all;}
.f-ti{overflow:hidden;text-indent:-30000px;}
.f-ti2{text-indent:2em;}
.f-lhn{line-height:normal;}
.f-tdu,.f-tdu:hover{text-decoration:underline;}
.f-tdn,.f-tdn:hover{text-decoration:none;}
.f-toe{overflow:hidden;word-wrap:normal;white-space:nowrap;text-overflow:ellipsis;}
.f-csp{cursor:pointer;}
.f-csd{cursor:default;}
.f-csh{cursor:help;}
.f-csm{cursor:move;}
.f-usn{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;}
.cl{clear:both;}
.dx{text-transform:uppercase}
.jz{vertical-align:middle;position:relative;top:-3px;}
.whi{color:#fff;}
.bj-none{background:none;}
.forget_wz{color:#aaaaa9;font-size:20px;}
.forget_x{border-top:1px solid #ccc;padding:0px;}
/*登录注册开始*/
.login_img{background:url("../images/login_bj.jpg") no-repeat center;background-size:100% 100%;position:absolute;width:100%;max-width:640px;height:100%;}
.login_bj{background:rgba(231,236,236,0.8);border-radius:5px;padding:0px 20px;margin-bottom:90px;}
.login_bor{border:0px;border-bottom:1px solid #ccc;}
.box-no{box-shadow:none;}
.login_x{border-bottom:1px solid #aaa;}
.login_t{margin-left:11px;margin-right:22px;position:relative;top:-3px;}
.login_wjmm{color:#27d9a0;margin-right:10px;}
.login_xx{position:absolute;right:0px;border:0px;background:none;top:4px;display:none;z-index:2;}
.input-group-addon{background:none;}
.login_z{width:35%;border-top:1px solid #c5c6c5;}
.login_wz{width:30%;margin-top:-8px;font-size:16px;}
/*登录注册结束*/
/*首页开始*/
.swiper-container{width:100%;}
.swiper-slide{text-align:center;font-size:18px;background:#fff;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;position:relative;}
.swiper-slide img{width:100%;height:auto;}
.sy_x{border:1px solid #646464;width:88px;padding:5px;margin:0 auto;}
.sy_xx{background:url("../images/sy_xx.png") no-repeat center;}
.sy_md{text-underline:none;}
.sy_mdwz{color:#646464;font-size:16px;background:url("../images/to_img1.jpg") no-repeat #ffffff;height:40px;line-height:40px;background-position:-15px 0px;}
/*首页结束*/
/*0ne地图开始*/
.td_img{margin-top:-46px;}
.tab_wz1{font-size:16px;color:#323232;font-weight:bold;}
.tab_w2{color:#aaa;}
.tab_wz3{font-size:16px;color:#646464;}
.tab_wz4{color:#ffb1b1;}
/*0ne地图结束*/
/*帮助中心开始*/
.help_kf{font-size:16px;}
.help_kf span{font-size:14px;color:#1975ff;}
.help_x{border-bottom:1px dashed #ccc;width:100%;}
.help_con{font-size:14px;line-height:46px;color:#757575;}
/*帮助中心结束*/
/*还款计划开始*/
.repay_bj{background:#f6ac19;color:#fff;border-right:1px solid #fff;text-align:center;border-bottom:0px !important;}
/*还款计划结束*/
/*订单提交开始*/
.order_wz{font-size:20px;/* font-weight:bold;*/
 color:#27d9a0;position:relative;top:3px;}
.order_x{margin:0 auto;width:60%;border-bottom:1px dashed #ccc;margin-top:30px;}
.order_wz1{margin:0 auto;text-align:center;margin-top:15px;}
/*数量加减*/
.Spinner{display:block;overflow:hidden;}
.Spinner .Amount{width:36px;height:25px;padding:4px 5px;line-height:17px;border-width:1px 0;border-style:solid;border-color:#d9d9d9;float:left;text-align:center;color:#565656;outline:0;}
.Spinner a{display:inline-block;width:25px;height:25px;border:1px solid #d9d9d9;background-color:#f7f7f7;float:left;cursor:pointer;outline:0;}
.Spinner a i{font-style:normal;background:url("../images/BuynBtn.png") no-repeat;display:block;width:9px;height:9px;margin:8px;text-indent:999999%;overflow:hidden;}
.Spinner .Decrease i{background-position:-9px -9px;}
.Spinner .Increase i{background-position:-9px -0px;}
.Spinner .DisDe i{background-position:-0px -9px;}
.Spinner .DisIn i{background-position:-0px -0px;}
.nav-tabs > li.active > a,.nav-tabs > li.active > a:hover,.nav-tabs > li.active > a:focus{color:#fff;cursor:default;background-color:#f6ad1c;border:1px solid #ddd;border-bottom-color:transparent;}
.nav-tabs > li > a{margin-right:2px;line-height:1.42857143;border-radius:5px;color:#aaa;border:1px solid #ccc;padding:5px 15px;}
.order_xxx{padding:0px 6px;}
.order_q1{position:relative;top:-1px;}
/*订单提交结束*/
/*确认订单开始*/
/*.qr_d1{*/
/*background:url("../images/qr1.jpg") no-repeat;*/
/*width:100%;*/
/*height:70px;*/
/*background-size:100% 100%;*/
/*}
*/
/*确认订单结束*/
/*签证拒绝开始*/
.qz_wz{width:70%;margin:0 auto;border:1px solid #ff3333;padding:10px 5px;}
.qz_wz1{width:70%;margin:0 auto;background:#ffcccc;}
/*签证拒绝结束*/
/*下单成功开始*/
.single_x{border-top:1px dashed #ccc;}
/*下单成功结束*/
/*实名认证开始*/
.login_error{background:#e4e4e4;padding:20px 0px;}
.real_wz{color:#323232;font-size:15px;}
.real_t{margin-left:0px;margin-right:10px;position:relative;top:-3px;}
.rael_w2{color:#323232;}
.modal-header{border-radius:3px;}
/*实名认证结束*/
/*预定金管理开始*/
.res_div{font-size:18px;font-weight:bold;width:20%;color:white;line-height:125px;text-align:center;}
.res_div1{width:77%;margin-left:2%;}
.ydj_ul>li{margin-bottom:1.5%;}
/*预定金管理结束*/
/*暂无订单开始*/
.order-nav{cursor:pointer;border-bottom:4px solid #fff !important;color:#aaa;}
.order-nav-on{cursor:pointer;border-bottom:4px solid #27d9a0 !important;color:#27d9a0;}
.order-line{border-bottom:1px solid #e1e1e1;}
/*暂无订单结束*/
/*还款计划开始*/
.order-box{border-top:2px solid #e1e1e1;border-bottom:2px solid #e1e1e1;}
.order_x1{border-bottom:1px dashed #999;}
.hk_ul>li{text-align:right;margin-bottom:3px;}
/*还款计划结束*/
/*订单联系客服开始*/
.order_jt{text-align:right;}
.order_jt>img{margin-top:36px;}
/*订单联系客服结束*/
/*个人中心开始*/
.user-info-qt{width:26px;height:26px;margin:10px;float:left;background:url(../images/icon1.png) no-repeat 0px 0px;background-size:100%;}
.user-info-qt1{width:26px;height:26px;margin:10px;float:left;}
.info-line{line-height:46px;height:46px;cursor:pointer;}
.info-tit{font-size:1.05em;float:left;}
.info-right{float:right;margin-top:14px;margin-right:10px;}
.personal_x{border-bottom:1px solid #e4e4e4;/* border-top:1px solid #e4e4e4;*/
}
.tool-bottom{position:fixed;margin-bottom:-1px;bottom:-1px;width:100%;max-width:640px;}
.tool-bottom h4{color:#fff;}
.personal_on{background:#f6ad1c;padding:4px 0px 4px 0px;}
.personal_bot{padding:4px 0px;}
.gr_bj{background:url("../images/grzx.jpg") no-repeat;height:100px;background-size:100% 100%;}
.gr_tx{width:80px;height:80px;overflow:hidden;border-radius:40px;border:3px solid #e5e5e8;margin-top:8px;}
.gr_ul>li{color:#fff;margin-bottom:6px;}
.gr_btn{margin-top:9px !important;margin-right:20px;border-radius:3px;}
/*个人中心结束*/
/*个人资料开始*/
.personal_x1{border-bottom:1px dashed #ccc;}
.add-on1{float:right;position:absolute;top:14px;right:17px;}
.gr_melf{margin-left:-13px !important;}
/*个人资料结束*/
/*银行卡管理开始*/
.bank_x{border-top:1px solid #ccc;}
.bank_tab{margin-bottom:0px;}
.jt_xz{transform:rotate(180deg);-webkit-transform:rotate(180deg);}
.bank_yh{margin-left:54px;padding:0px 0px 10px 0px;}
.bank_nr{border:1px solid #ccc;height:150px;overflow:auto !important;}
.bank_nr>ul>li{margin-top:11px;}
.bank_radio{margin-left:15px !important;margin-right:15px !important;position:relative;top:2px;}
.bank_dh{margin-top:-5px;}
/*银行卡管理结束*/
/*还款情况开始*/
.table-blue{}
/*还款情况结束*/
/*签约开始*/
.user-check{}
.user-check>input{}
/*签约结束*/
/*支付方式开始*/
.pay_bj{background:url("../images/pay_bj.png") no-repeat;width:100%;height:213px;background-size:100% 100%;}
.pay_ul>li{margin-top:6px;font-size:12px;}
.bank_ff{border:1px solid #ccc;padding:5px;width:83px;position:relative;}
.bank_sjx{position:absolute;top:-5px;right:0px;}
/*支付方式结束*/
/*loading开始*/
.loading_div{position:fixed;width:100%;height:100%;max-width:640px;background:rgba(255,255,255,0.5);top:0px;z-index:10000;overflow-x:hidden;overflow-y:hidden;}
.loading{text-align:center;position:relative;top:48%;}
/*loading结束*/
/*取消旅单开始*/
.order-input{margin-right:5px !important;}
.order_qxul{width:70%;margin:0 auto;}
.order_qxul>li>label{font-weight:normal !important;width:100%;}
.close_xx{position:absolute;right:10px;top:7px;}
/*取消旅单结束*/
/*订单提交时间选择开始*/
.order_table{height:233px;overflow:auto;}
.table_label{position:absolute;width:100%;text-align:right;left:-10%;}
/*订单提交时间选择结束*/
/*产品详情开始*/
.product_bar{height:30px;line-height:30px;background:#ff9d9d;border-radius:25px;color:#fff;font-size:14px;width:90%;margin:0 auto;overflow:hidden;}
.product_img{position:relative;top:-2px;margin-right:10px;}
.user-info-qtt{width:26px;height:27px;margin:10px;float:left;margin-left:0;background:url(../images/icon2.png) no-repeat 0px 0px;background-size:100%;}
.time_md{border-left:1px solid #F6AD1C;margin-left:10px;margin-bottom:20px;}
.time_md>ul>li{position:relative;}
.time_yd{position:absolute;left:-10px;top:-4px;}
.time_yd1{background:url("../images/time_day.png") no-repeat;height:20px;text-align:center;color:#fff;width:50px;line-height:20px;background-size:100% 100%;padding-left:7px;position:absolute;left:13px;}
.time_yd2{font-size:16px;font-weight:bold;color:#323232;margin-left:76px;}
.time_yd3{font-size:14px;color:#646464;margin-left:76px;}
.info-right1{float:right;margin-top:20px;margin-right:10px;}
.time_wz{margin-left:11px;}
.time_wz table{margin-left:-6px;}
.time_line{padding-top:10px !important;font-weight:bold;}
.time_lv{margin-left:-6px;position:relative;top:7px;}
.cost_md{background:url("../images/shop_t.jpg") no-repeat;height:24px;padding-left:25px;line-height:24px;color:gray;}
.cost_mdul>li{list-style:initial;margin-left:37px;}
.personal_on1{background:#f6ad1c;padding:15px 0px;font-size:18px;}
/*产品详情结束*/
/*帮助中心开始*/
.help_bj{background:url(../images/help_bj.png) no-repeat;height:50px;background-size:100% 100%;line-height:50px;color:#fff;}
/*帮助中心结束*/
/*图片放大*/
.am-figure-zoomable:after{color:#fff;}
/*图片放大*/
.explain_p{position:relative;padding-left:25px;color:gray;}
.explain_p>img{position:absolute;top:10px;left:1px;}
/*体验流程开始*/
.con_md{position:relative;}
.md_img{position:absolute;top:1%;width:76%;margin-left:-38%;left:50%;/*background-color:red;*/
 text-align:center;height:20%;}
.md_img1{width:100%;margin-left:8%;}
.md_d1{position:absolute;z-index:10000;}
.md_d2{position:absolute;z-index:1;top:40px;left:-12px;}
.md_d2>img{width:50%;}
.md_d3{position:absolute;z-index:1;top:11px;left:25px;}
.md_d3>img{width:50%;}
.md_qq{position:absolute;top:1%;left:1%;}
.md_qq>img{width:40%;}
.md_ty{text-align:center;position:absolute;bottom:2%;}
.md_ty img{width:80%;}
.swing{-webkit-animation:swinging 7s ease-in-out 0s infinite;-moz-animation:swinging 7s ease-in-out 0s infinite;animation:swinging 7s ease-in-out 0s infinite;-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;transform-origin:50% 0;}
@-webkit-keyframes swinging{0%{-webkit-transform:rotate(0deg);}
5%{-webkit-transform:rotate(10deg);}
10%{-webkit-transform:rotate(-9deg);}
15%{-webkit-transform:rotate(8deg);}
20%{-webkit-transform:rotate(-7deg);}
25%{-webkit-transform:rotate(6deg);}
30%{-webkit-transform:rotate(-5deg);}
35%{-webkit-transform:rotate(4deg);}
40%{-webkit-transform:rotate(-3deg);}
45%{-webkit-transform:rotate(2deg);}
50%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(0deg);}
}
/*体验流程结束*/
/*查看详情样式*/
.mar5{margin-top:6px;}
.btn-to{position:fixed;width:100%;max-width:640px;bottom:80px;}
/*二期还款银行卡开始*/
.bank_wz{background:#f6ac19;padding:10px 0px;color:#fff;border-radius:5px 5px 0px 0px;padding-left:6%;padding-right:6%;}
.bank_wz1{padding:20px 0px;background:#fff;padding-left:6%;padding-right:6%;}
.form_td{line-height:34px !important;width:94px;text-align:right;}
.td_bot{padding:10px 8px 0px 8px !important;}
.bank_xl{width:100%;border:1px solid #ccc;border-top:0px;border-bottom:0px;position:absolute;z-index:1;background:#ffffff;}
.bank_xl>ul>li{padding-top:4px;padding-bottom:3px;border-bottom:1px solid #ccc;padding-left:5px;}
.bank_xl>ul>li>a{display:block;width:100%;}
.bank_xljt{position:absolute;right:0px;top:1px;width:50px;height:33px;/* background-color:red;*/
 line-height:33px;text-align:center;border-left:1px solid #ccc;}
.bank_xljt1{height:32px;position:absolute;width:100%;top:0px;}
/*二期还款银行卡结束*/
/*二期订单详情开始*/
.td_run{width:96px;text-align:right;}
.border-orange{border:1px solid #f6ac19;}
/*二期订单详情结束*/
/*二期提交订单开始*/
.erdate{position:absolute;width:15px;right:27px;top:13px;}
.color-green{color:#27d8a1;}
.line-height-34{line-height:34px !important;}
.peerdiv_table{padding:10px;box-shadow:0px 0px 10px #DFDADA;}
/*二期提交订单结束*/
/*二期还款计划开始*/
.abs-6{position:absolute;top:6px;left:0px;display:none;}
/*二期还款计划结束*/
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
121.49 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
121.49 KB
立即下载
盛菊
了解
打赏作者 鼓励作者
jquery特效8
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章