QQ客服
当前位置 : 江西快三计划 > 代码 > 网页特效 > 其它特效 > jquery借贷网站滑块拖动金额利息代码

江西快三计划: 原创商用 jquery借贷网站滑块拖动金额利息代码

jquery 实现金融借贷网滑块拖动借款额度以及借款期限效果代码,js css 分离,结构简单清晰,参数均可修改,下载即可使用。
分享到微信朋友圈
X
[声明]该素材属于原创商用,未经允许请勿转载,内有版权说明,否则追究相应的法律责任。

使用方法:

1、head引入css文件

<link href="css/style.css" rel="stylesheet" type="text/css"/>

2、head引入js文件

<script type="text/javascript" src="js/jquery.js"></script>

3、body引入HTML代码

<div class="aui-content">
	<div class="aui-content-box">
		<div class="aui-header">
			 出借<span id="moneyValue">23.9万</span>元,<span id="dateValue">90</span>天项目,利息约为:<span id="profit">4007.34</span>元
		</div>
		<div class="aui-header-tag"></div>
		<div class="aui-amount">
			<div class="aui-head-title">出借金额</div>
			<div class="aui-amount-item">
				<span class="span-point aui-spacing" id="aui-circle">
					<img src="images/spotRed.png">
				</span>
				<div class="money-value-pos">
					<input type="radio" value="1000" name="mv" id="mv1">
					<label for="mv1">1000元</label>
					<div class="bubble">直投项目起投金额 1000元</div>
				</div>
				<div class="money-value-pos">
					<input type="radio" value="5000" name="mv" id="mv2">
					<label for="mv2">5000元</label>
					<div class="bubble">少数用户首次出借5千元</div>
				</div>
				<div class="money-value-pos">
					<input type="radio" value="10000" name="mv" id="mv3">
					<label for="mv3">1万元</label>
					<div class="bubble">多数用户首次出借1万元</div>
				</div>
				<div class="money-value-pos">
					<input type="radio" value="50000" name="mv" id="mv4">
					<label for="mv4">5万元</label>
					<div class="bubble">20%单笔出借额约5万元</div>
				</div>
				<div class="money-value-pos">
					<input type="radio" value="100000" name="mv" id="mv5">
					<label for="mv5">10万元</label>
					<div class="bubble">15%单笔出借额约10万元</div>
				</div>
				<div class="money-value-pos">
					<input type="radio" value="239000" name="mv" id="mv6" checked="">
					<label for="mv6">23.9万元</label>
					<div class="bubble" style="display: block;">人均出借金额为23.9万元</div>
				</div>
				<div class="money-value-pos" style="margin: 0;">
					<input type="radio" value="500000" name="mv" id="mv7">
					<label for="mv7">50万元</label>
					<div class="bubble">VIP单笔出借额约50万元</div>
				</div>
			</div>
		</div>
		<div class="investDate aui-term">
			<div class="aui-head-title">出借期限</div>
			<div class="date-value">
				<span class="span-point" id="aui-circle-two">
					<img src="images/spotRed.png">
				</span>
				<div class="date-value-pos">
					<input type="radio" value="21" name="itd" id="itd1">
					<label for="itd1">21天</label>
					<div class="bubble">新手体验项目 21天,6%+4%</div>
				</div>
				<div class="date-value-pos">
					<input type="radio" value="30" name="itd" id="itd2">
					<label for="itd2">30天</label>
					<div class="bubble">每月定存,轻松理财 30天,6.3%</div>
				</div>
				<div class="date-value-pos">
					<input type="radio" value="90" name="itd" id="itd3" checked="">
					<label for="itd3">90天</label>
					<div class="bubble" style="display: block;">明星产品人气爆款 90天,6.8%</div>
				</div>
				<div class="date-value-pos">
					<input type="radio" value="180" name="itd" id="itd4">
					<label for="itd4">180天</label>
					<div class="bubble">半年定存理财 180天,7%</div>
				</div>
				<div class="date-value-pos">
					<input type="radio" value="270" name="itd" id="itd5">
					<label for="itd5">270天</label>
					<div class="bubble">资金周转理财 270天,7.5%</div>
				</div>
				<div class="date-value-pos" style="margin: 0;">
					<input type="radio" value="365" name="itd" id="itd6">
					<label for="itd6">365天</label>
					<div class="bubble">收益Top,壕友偏爱 365天,7.8%</div>
				</div>
			</div>
		</div>
		<div class="aui-button">开始出借</div>
	</div>
</div>

<script type="text/javascript" src="js/script.js"></script> <!-- 先执行html 再执行jquery -->
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 江西快三计划

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
  • 当前我国电力供应能力充足 前五月用电量同比增近一成 2019-05-17
  • 上海90家定点医疗机构将受医保常规检查 2019-05-17
  • 泛海助学行动获第十二届人民企业社会责任奖年度案例奖 2019-05-16
  • 首届典型违法广告形式漫画大奖赛圆满落幕 2019-05-01
  • 广州市白云区人民法院公告专栏 2019-05-01
  • 电子商务法草案三审:微商纳入经营者范围,个人二手转让不算 2019-04-25
  • 捷克总统焚烧红内裤羞辱记者 曾称媒体是化粪池 2019-04-16
  • 国际资讯--北京频道--人民网 2019-04-07
  • 特色小镇狂热下的思考:产业培育需要耐心 凤旅观察 2019-04-07
  • 人民观影团:《东方快车谋杀案》热映 2019-04-04
  • 第十一届北京文博会海淀展区亮相 2019-04-03
  • “笔墨纸砚文化之旅 ”——海峡两岸大学生文化体验营大陆营员名单揭晓 2019-03-31
  • 山西3名干部涉嫌严重违纪违法接受审查调查 2019-03-31
  • 降落伞被丈夫动手脚 女子从1220米高空坠落竟生还 2019-03-28
  • 大文豪们如何花式说出“我爱你”? 2019-03-28
  • 810| 178| 562| 869| 298| 170| 564| 366| 876| 975|