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

HTML5手机端手指滑动上拉加载代码

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

以下是 HTML5手机端手指滑动上拉加载代码 的示例演示效果:

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

部分效果截图:

HTML5手机端手指滑动上拉加载代码

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="all" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="pragma" Content="no-cach" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta http-equiv="keywords" content="" />
<meta name="author" content="" />
<meta name="copyright" content="" />
<meta name="description" content="" />
<meta name="HandheldFriendly" content="true" />
<title>HTML5手机端手指滑动上拉加载代码</title>
<link type="text/css" media="all" rel="stylesheet" href="css/style.css" />
<link type="text/css" media="all" rel="stylesheet" href="css/dropload.css">
</head>
<body ontouchstart=""  id="container">
<header class="tabHead">
  <span class="active">参与开户<small>（200）</small></span>
  <span>提交资料<small>（116）</small></span>
  <span>开户成功<small>（10）</small></span>
  <b class="border"></b>
</header>
<article class="khfxWarp">
  <section class="khfxPane" style="display:block">
  </section>

  <section class="khfxPane">
  </section>

  <section class="khfxPane">
  </section>
</article>
<script src="lib/jquery-2.2.3.min.js"></script>
<script src="lib/dropload.js"></script>
<script src="lib/khData.js"></script>
</body>
</html>

JS代码(khData.js):

$(function (){
	var itemIndex = 0;
	var tabLoadEndArray = [false,false,false];
	var tabLenghtArray = [28,15,47];
	var tabScroolTopArray = [0,0,0];
	// dropload var dropload = $('.khfxWarp').dropload({
	scrollArea:window,domDown:{
	domClass:'dropload-down',domRefresh:'<div class="dropload-refresh">上拉加载更多</div>',domLoad:'<div class="dropload-load"><span class="loading"></span>加载中...</div>',domNoData:'<div class="dropload-noData">已无数据</div>'}
,loadDownFn:function (me){
	setTimeout(function (){
	if (tabLoadEndArray[itemIndex]){
	me.resetload();
	me.lock();
	me.noData();
	me.resetload();
	return;
}
var result = '';
	for (var index = 0;
	index < 10;
	index++){
	if (tabLenghtArray[itemIndex] > 0){
	tabLenghtArray[itemIndex]--;
}
else{
	tabLoadEndArray[itemIndex] = true;
	break;
}
if (itemIndex == 0){
	result += '' + ' <hgroup class="khfxRow">' + ' <header>2015-10-18 23:32:13</header>' + ' <div class="mid">' + ' <img class="photo" src="images/img01.png" >' + ' <span><label>昵称：</label>弦上漫步</span> ' + ' <span><label>账号：</label>' + tabLenghtArray[itemIndex] + '</span> ' + ' <span><label>手机：</label>1391****746</span> ' + ' <span><label>券商：</label>中信证券</span> ' + ' </div>' + ' <footer><a href="#">提醒开户</a></footer>' + ' </hgroup>';
}
else if (itemIndex == 1){
	result += '' + ' <hgroup class="khfxRow">' + ' <header><span>已提交资料</span>2015-10-18 23:32:13</header>' + ' <div class="mid">' + ' <img class="photo" src="images/img01.png" >' + ' <span><label>昵称：</label>弦上漫步</span> ' + ' <span><label>账号：</label>' + tabLenghtArray[itemIndex] + '</span> ' + ' <span><label>手机：</label>1391****746</span> ' + ' <span><label>券商：</label>中信证券</span> ' + ' </div>' + ' </hgroup>';
}
else if (itemIndex == 2){
	result += '' + '<hgroup class="khfxRow">' + '<header><span>已开户成功</span>2015-10-18 23:32:13</header>' + '<div class="mid">' + '<img class="photo" src="images/img01.png" >' + '<span><label>昵称：</label>弦上漫步</span> ' + '<span><label>账号：</label>' + tabLenghtArray[itemIndex] + '</span> ' + '<span><label>手机：</label>1391****746</span> ' + '<span><label>券商：</label>中信证券</span> ' + '</div>' + '</hgroup>';
}
}
$('.khfxPane').eq(itemIndex).append(result);
	me.resetload();
}
,500);
}
}
);
	$('.tabHead span').on('click',function (){
	tabScroolTopArray[itemIndex] = $(window).scrollTop();
	var $this = $(this);
	itemIndex = $this.index();
	$(window).scrollTop(tabScroolTopArray[itemIndex]);
	$(this).addClass('active').siblings('.tabHead span').removeClass('active');
	$('.tabHead .border').css('left',$(this).offset().left + 'px');
	$('.khfxPane').eq(itemIndex).show().siblings('.khfxPane').hide();
	if (!tabLoadEndArray[itemIndex]){
	dropload.unlock();
	dropload.noData(false);
}
else{
	dropload.lock('down');
	dropload.noData();
}
dropload.resetload();
}
);
}
);

CSS代码(style.css):

@charset "utf-8";/* * Author:UED * Version:1.0.0*/
html{font-size:75px;}
@media screen and (min-width:320px){html{font-size:64px;}
}
@media screen and (min-width:360px){html{font-size:72px;}
}
@media screen and (min-width:375px){html{font-size:75px;}
}
@media screen and (min-width:414px){html{font-size:82.8px;}
}
body,button,input,select,textarea{font:0.173333rem/1.5 Arial,San Francisco,Helvetica,SimHei,SimSun,sans-serif;line-height:1.5;}
h1,h2,h3,h4,h5,h6,b,strong{font-weight:normal;}
button,input,select,textarea{padding:0;background:none;border:0;font-size:inherit;}
input:focus{outline:0;}
i{font-style:normal;}
a{text-decoration:none;}
dfn{font-weight:normal;font-style:normal;}
html,body{background-color:#EAEAEA;}
#container{max-width:640px;margin:0 auto;}
.cur_ranking i,.guang_close:after{background:url(../images/un_bg.png) no-repeat;background-size:1.333rem auto;}
/*直播列表*/
.live_list{}
.live_list li{background-color:#fff;margin-bottom:10px;}
.list_info{overflow:hidden;font-size:0.173333rem;color:#a0a0a0;padding:0.133333rem 1.533333rem 0.133333rem 0.106667rem;}
.list_img{float:left;width:0.533333rem;height:0.533333rem;position:relative;}
.list_img img{width:100%;display:block;border-radius:100%;}
.list_img:after{content:"";position:absolute;right:-0.066667rem;bottom:0;width:0.2rem;height:0.213333rem;background:url(../images/icon_v.png) no-repeat;background-size:0.2rem auto;}
.list_name{float:left;margin-left:0.133333rem;}
.list_name span{display:block;color:#000;font-size:0.226667rem;line-height:0.293333rem;}
.list_num{float:right;margin-right:-1.533333rem;width:1.533333rem;margin-top:0.066667rem;}
.list_num span{font-size:0.266667rem;color:#4b4b4b;}
.list_state{position:relative;}
.list_state img{display:block;width:100%;}
.list_state span{position:absolute;right:0.133333rem;top:0.2rem;padding:0 0.133333rem;color:#fff;font-size:0.226667rem;height:0.32rem;line-height:0.32rem;box-shadow:0 0 0 #5D5A5A,0 0 0 #5D5A5A,inset 0 1px 1px 0 #5D5A5A,0 1px 1px 0px #5D5A5A;text-shadow:0 1px 1px #040000;border:solid 1px #fff;border-radius:20px;}
/*微店*/
.detail_list{position:relative;background-color:#fff;font-size:0.226667rem;color:#333;overflow:hidden;}
.detail_list dt{font-size:0.24rem;padding:0 0.233333rem 0 0.266667rem;height:0.666667rem;line-height:0.666667rem;position:relative;overflow:hidden;z-index:2;}
.detail_list dt:after,.detail_list dd:after,.detail_list:after,.money_list:after,.money_list li:after,.rule_list:after,.rule_list dt:after,.rule_list dd:after,.ranking_list li:before,.tabHead:after,.khfxRow:after,.khfxRow .mid:after,.khfxRow footer:after,.cur_ranking:after,.open_con:after,.open_num:before,.open_num p:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-position:top,right top,bottom,left top;background-repeat:no-repeat;background-size:100% 1px,1px 100%;}
/*下边线*/
.detail_list dt:after,.detail_list dd:after,.detail_list:after,.money_list li:after,.rule_list dt:after,.rule_list dd:after,.shop_vipwrap dt:before,.tabHead:after{background-image:-webkit-linear-gradient(top,#CDCDCD,#CDCDCD 0%,transparent 0%),-webkit-linear-gradient(right,#CDCDCD,#CDCDCD 0%,transparent 0%),-webkit-linear-gradient(bottom,#CDCDCD,#CDCDCD 60%,transparent 60%),-webkit-linear-gradient(left,#CDCDCD,#CDCDCD 0%,transparent 0%);background-image:-webkit-linear-gradient(top,#CDCDCD,#CDCDCD 0%,transparent 0%),-webkit-linear-gradient(right,#CDCDCD,#CDCDCD 0%,transparent 0%),-webkit-linear-gradient(bottom,#CDCDCD,#CDCDCD 60%,transparent 60%),-webkit-linear-gradient(left,#CDCDCD,#CDCDCD 0%,transparent 0%);}
/* bottom&&d6d6d6 */
.ranking_list li:before{background-image:-webkit-linear-gradient(top,#d6d6d6,#d6d6d6 0%,transparent 0%),-webkit-linear-gradient(right,#d6d6d6,#d6d6d6 0%,transparent 0%),-webkit-linear-gradient(bottom,#d6d6d6,#d6d6d6 60%,transparent 60%),-webkit-linear-gradient(left,#d6d6d6,#d6d6d6 0%,transparent 0%);background-image:-webkit-linear-gradient(top,#d6d6d6,#d6d6d6 0%,transparent 0%),-webkit-linear-gradient(right,#d6d6d6,#d6d6d6 0%,transparent 0%),-webkit-linear-gradient(bottom,#d6d6d6,#d6d6d6 60%,transparent 60%),-webkit-linear-gradient(left,#d6d6d6,#d6d6d6 0%,transparent 0%);}
/*top & bottom && d6d6d6 */
.cur_ranking:after,.open_con:after{background-image:-webkit-linear-gradient(top,#d6d6d6,#d6d6d6 60%,transparent 60%),-webkit-linear-gradient(right,#d6d6d6,#d6d6d6 0%,transparent 0%),-webkit-linear-gradient(bottom,#d6d6d6,#d6d6d6 60%,transparent 60%),-webkit-linear-gradient(left,#d6d6d6,#d6d6d6 0%,transparent 0%);background-image:-webkit-linear-gradient(top,#d6d6d6,#d6d6d6 60%,transparent 60%),-webkit-linear-gradient(right,#d6d6d6,#d6d6d6 0%,transparent 0%),-webkit-linear-gradient(bottom,#d6d6d6,#d6d6d6 60%,transparent 60%),-webkit-linear-gradient(left,#d6d6d6,#d6d6d6 0%,transparent 0%);}
/* bottom—top-left-right&&e5e5e5 */
.khfxRow:after{background-image:-webkit-linear-gradient(top,#e5e5e5,#e5e5e5 60%,transparent 60%),-webkit-linear-gradient(right,#e5e5e5,#e5e5e5 60%,transparent 60%),-webkit-linear-gradient(bottom,#e5e5e5,#e5e5e5 60%,transparent 60%),-webkit-linear-gradient(left,#e5e5e5,#e5e5e5 60%,transparent 60%);background-image:-webkit-linear-gradient(top,#e5e5e5,#e5e5e5 60%,transparent 60%),-webkit-linear-gradient(right,#e5e5e5,#e5e5e5 60%,transparent 60%),-webkit-linear-gradient(bottom,#e5e5e5,#e5e5e5 60%,transparent 60%),-webkit-linear-gradient(left,#e5e5e5,#e5e5e5 60%,transparent 60%);}
/* top&&e5e5e5 */
.khfxRow .mid:after,.khfxRow footer:after,.open_num:before{background-image:-webkit-linear-gradient(top,#e5e5e5,#e5e5e5 60%,transparent 60%),-webkit-linear-gradient(right,#e5e5e5,#e5e5e5 0%,transparent 0%),-webkit-linear-gradient(bottom,#e5e5e5,#e5e5e5 0%,transparent 0%),-webkit-linear-gradient(left,#e5e5e5,#e5e5e5 0%,transparent 0%);background-image:-webkit-linear-gradient(top,#e5e5e5,#e5e5e5 60%,transparent 60%),-webkit-linear-gradient(right,#e5e5e5,#e5e5e5 0%,transparent 0%),-webkit-linear-gradient(bottom,#e5e5e5,#e5e5e5 0%,transparent 0%),-webkit-linear-gradient(left,#e5e5e5,#e5e5e5 0%,transparent 0%);}
/* right &&e5e5e5 */
.open_num p:after{background-image:-webkit-linear-gradient(top,#e5e5e5,#e5e5e5 0%,transparent 0%),-webkit-linear-gradient(right,#e5e5e5,#e5e5e5 60%,transparent 60%),-webkit-linear-gradient(bottom,#e5e5e5,#e5e5e5 0%,transparent 0%),-webkit-linear-gradient(left,#e5e5e5,#e5e5e5 0%,transparent 0%);background-image:-webkit-linear-gradient(top,#e5e5e5,#e5e5e5 0%,transparent 0%),-webkit-linear-gradient(right,#e5e5e5,#e5e5e5 60%,transparent 60%),-webkit-linear-gradient(bottom,#e5e5e5,#e5e5e5 0%,transparent 0%),-webkit-linear-gradient(left,#e5e5e5,#e5e5e5 0%,transparent 0%);}
.detail_list dt span{float:right;}
.detail_list dd{position:relative;padding:0.233333rem 1.533rem 0.233333rem 1.333rem;margin-left:0.267rem;overflow:hidden;z-index:2;}
.detail_list dd span{float:right;width:1.533rem;margin-right:-1.533rem;text-align:right;padding-right:0.233rem;-moz-box-sizing:border-box;box-sizing:border-box;}
.detail_list dd strong{float:left;color:#999;width:1.067rem;margin-left:-1.333rem;position:relative;z-index:2;}
.detail_list dd:nth-last-of-type(1):after,.money_list li:nth-last-of-type(1):after{display:none;}
.ranking_tip{position:relative;z-index:2;}
.ranking_tip:after{content:"";display:inline-block;width:0.213rem;height:0.213rem;background:url(../images/doubt.png) no-repeat;background-size:100% auto;vertical-align:-1px;margin-left:0.033rem;}
.detail_tip{margin-top:0.233rem;margin-left:0.267rem;color:#666;font-size:0.2rem;}
.detail_tip i{display:inline-block;background:url(../images/icon_diamond.png) no-repeat;background-size:0.24rem auto;width:0.24rem;height:0.173rem;vertical-align:-1px;}
.shop_top{background-color:#FF6E2A;padding:0.333rem 0.233rem 0.333rem 0.233rem;color:#fff;font-size:0.227rem;}
.shop_top p a{float:right;color:#fff;}
.shop_top p a:after,.money_list li span:after{content:"";display:inline-block;width:9px;height:9px;border-right:solid 1px #fff;border-bottom:solid 1px #fff;-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg);}
.shop_top p .shop_withdraw{position:relative;font-size:0.24rem;height:0.4rem;line-height:0.4rem;padding:0 0.3rem;margin-top:0.133rem;}
.shop_top p .shop_withdraw:before{content:'';position:absolute;top:0;left:0;width:200%;height:200%;border:1px solid #fff;border-radius:10px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-transform:scale(0.5);-ms-transform-origin:left top;-webkit-transform:scale(0.5);-webkit-transform-origin:left top;transform:scale(0.5);transform-origin:left top;}
.shop_top p .shop_withdraw:after{display:none;}
.money{font-size:0.4rem;margin-top:0.233rem;}
.money span{font-size:0.733rem;line-height:0.533rem;}
.money_list{position:relative;background-color:#fff;padding-left:0.233rem;}
/*上下边线*/
.money_list:after,.rule_list:after{background-image:-webkit-linear-gradient(top,#CDCDCD,#CDCDCD 60%,transparent 60%),-webkit-linear-gradient(right,#CDCDCD,#CDCDCD 0%,transparent 0%),-webkit-linear-gradient(bottom,#CDCDCD,#CDCDCD 60%,transparent 60%),-webkit-linear-gradient(left,#CDCDCD,#CDCDCD 0%,transparent 0%);background-image:-webkit-linear-gradient(top,#CDCDCD,#CDCDCD 60%,transparent 60%),-webkit-linear-gradient(right,#CDCDCD,#CDCDCD 0%,transparent 0%),-webkit-linear-gradient(bottom,#CDCDCD,#CDCDCD 60%,transparent 60%),-webkit-linear-gradient(left,#CDCDCD,#CDCDCD 0%,transparent 0%);}
.money_list li{height:0.767rem;line-height:0.767rem;font-size:0.227rem;color:#333;position:relative;padding-right:0.267rem;z-index:2;}
.money_list li span{float:right;}
.money_list li span:after{border-right-color:#9B9B9B;border-bottom-color:#9B9B9B;margin-left:0.067rem;}
.btns{position:absolute;bottom:0;left:0;width:100%;z-index:10;padding:0 0.667rem;-moz-box-sizing:border-box;box-sizing:border-box;}
.btns a{display:block;margin-bottom:15px;font-size:0.24rem;height:0.667rem;line-height:0.667rem;text-align:center;}
.wechat{background-color:#FB580A;color:#fff;border-radius:26px;}
.live_btn{color:#fb580b;position:relative;}
.live_btn:after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;border:1px solid #FB580A;border-radius:50px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-transform:scale(0.5);-ms-transform-origin:left top;-webkit-transform:scale(0.5);-webkit-transform-origin:left top;transform:scale(0.5);transform-origin:left top;}
.btns .rule_btn{height:auto;line-height:1.5;font-size:0.2rem;color:#666;}
/*奖励规则*/
.rule_list{margin-top:10px;background-color:#fff;position:relative;}
.rule_list dt{padding:0.067rem 0.267rem 0.133rem;color:#333;font-size:0.24rem;position:relative;}
.rule_list dt i{display:inline-block;width:0.227rem;height:0.227rem;margin-right:0.067rem;vertical-align:2px;background-color:#F16868;border-radius:100%;color:#fff;text-align:center;line-height:0.227rem;font-size:0.16rem;}
.rule_list dt p{color:#666;font-size:0.2rem;line-height:0.213rem;}
.rule_list dt p span{font-size:0.16rem;}
.rule_list dt:after{}
.rule_list dd{margin-left:0.267rem;font-size:0.227rem;position:relative;color:#666;height:0.767rem;line-height:0.767rem;padding-right:0.267rem;}
.rule_list dd span{float:right;}
.rule_list dd:nth-last-of-type(1):after{display:none;}
.rule_tip{padding:0.173rem 0 0 0.267rem;color:#666;font-size:0.16rem;}
.rule_tip span{display:block;}
.detail_list .detail_royalty{background-color:#f0f9ff;margin-left:0;}
.detail_list .detail_royalty strong{margin-left:-1.066rem;}
/*新的奖励规则*/
.shop_vipwrap dt{position:relative;background-color:#fff;height:0.533rem;line-height:0.533rem;padding-left:0.227rem;color:#333;font-size:0.227rem;}
.shop_vipwrap dd{padding:0 0.227rem 0.147rem;color:#333;font-size:0.2rem;}
.shop_vipwrap p{margin-top:0.147rem;}
.shop_vipwrap .award_num{padding-left:0.227rem;}
.shop_vipwrap .award_num span{float:left;width:0.227rem;margin-left:-0.227rem;}
.award_table{width:100%;table-layout:fixed;}
.award_table td,.award_table th{width:25%;border:solid 1px #DCDCDC;padding:0.067rem;text-align:center;background-color:#fff;}
.award_table th{background-color:#FAFAFA;}
/*弹出层*/
.guang_mask{position:fixed;width:100%;height:100%;background:rgba(0,0,0,0.8);left:0;top:0;z-index:10;display:none;}
.guang_pop{position:absolute;max-height:70%;overflow-y:auto;-webkit-overflow-scrolling:touch;overflow-scrolling:touch;left:50%;width:90%;top:50%;margin-left:-45%;font-size:0.187rem;padding:0.4rem 0.133rem;background-color:#fff;border-radius:6px;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}
.guang_close{position:absolute;right:0px;top:0;width:0.4rem;height:0.4rem;font-size:0.227rem;line-height:0.4rem;text-align:center;color:#333;text-decoration:none;}
.guang_close:after{content:"";position:absolute;left:50%;top:50%;width:0.2rem;height:0.2rem;margin-left:-0.1rem;margin-top:-0.1rem;background-position:-0.767rem 0;}
.guang_poptxt{margin-top:0.2rem;color:#666;}
.guang_poptxt span{display:block;font-size:0.2rem;color:#333;}
/*微店优化0425*/
.new_total{text-align:center;}
.new_total strong{color:#ff6e2b;font-size:0.4rem;text-align:center;}
.new_total strong em{font-size:0.24rem;font-style:normal;}
.ranking_list{overflow-y:scroll;-webkit-overflow-scrolling:touch;overflow-scrolling:touch;background-color:#EAEAEA;}
.ranking_list li{padding:0.187rem 0.2rem 0.187rem 0.133rem;position:relative;height:0.573rem;line-height:0.573rem;background-color:#fff;}
.ranking_list li:after{content:"";clear:both;overflow:hidden;height:0;display:block;}
.rank{float:left;color:#999;font-size:0.227rem;width:0.4rem;}
.ranking_img{float:left;width:0.573rem;height:0.573rem;}
.ranking_img img{display:block;width:100%;border-radius:100%;}
.ranking_name{float:left;width:1.267rem;color:#000;font-size:0.2rem;margin-left:0.233rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ranking_num{float:right;text-align:right;color:#ff9900;font-size:0.173rem;}
.ranking_num span{margin-right:0.1rem;font-size:0.373rem;}
.rich .my_ranking{padding-left:0.5rem;margin:0.067rem 0;}
.rich .my_ranking:before{display:none;}
.ranking_myname{float:left;width:1.267rem;color:#000;font-size:0.2rem;margin-left:0.233rem;line-height:0.267rem;margin-top:0.027rem;}
.ranking_myname p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ranking_myname span{color:#999;font-size:0.173rem;}
/*loading*/
.pullUp{padding-bottom:4px;padding-top:10px;color:#b2b2b2;font-size:14px;text-align:center;}
.pullUp .pullUpIcon{vertical-align:text-top;margin:-3px 5px 0 0;display:inline-block;width:20px;height:20px;background:url(../images/load.png) no-repeat;background-size:20px 20px;-webkit-transform:rotate(0deg);-webkit-transition-duration:1s;-webkit-animation-name:refresh;-webkit-animation-duration:1s;-webkit-animation-timing-function:linear;-webkit-animation-iteration-count:infinite;}
@-ms-keyframes refresh{from{-ms-transform:rotate(0deg);}
to{-ms-transform:rotate(360deg);}
}
@-webkit-keyframes refresh{from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(360deg);}
}
@keyframes refresh{from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}
.cur_ranking{display:block;margin-top:10px;color:#333;font-size:0.227rem;height:0.8rem;line-height:0.8rem;padding-left:0.267rem;background-color:#fff;position:relative;}
.cur_ranking:before{content:"";position:absolute;top:50%;margin-top:-5px;right:0.267rem;width:9px;height:9px;border-right:solid 1px #9D9D9D;border-bottom:solid 1px #9D9D9D;-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg);}
.cur_ranking i{display:inline-block;width:0.347rem;height:0.347rem;margin-right:0.12rem;vertical-align:middle;background-position:-0.367rem 0;}
.open_con{padding-left:0.267rem;position:relative;margin-top:10px;background-color:#fff;}
.open_con .cur_ranking{margin-top:0;padding-left:0;}
.open_con .cur_ranking:after{display:none;}
.open_con .cur_ranking i{background-position:0 0;}
.open_num{position:relative;overflow:hidden;padding:0.267rem 0;}
.open_num p{float:left;width:50%;position:relative;-moz-box-sizing:border-box;box-sizing:border-box;color:#666;font-size:0.213rem;line-height:0.213rem;}
.open_num p:nth-last-of-type(1){padding-left:0.4rem;}
.open_num p:nth-last-of-type(1):after{display:none;}
.open_num p span{display:block;color:#ff6e2b;margin-top:0.133rem;}
@media screen and (max-width:320px){.btns a{margin-bottom:5px;}
}
/* 开户分享数据 */
.tabHead{position:fixed;top:0;left:0;width:100%;z-index:10;background:#fff;overflow:hidden;}
.tabHead span{display:block;width:33.3%;float:left;position:relative;z-index:2;color:#666666;text-align:center;font-size:0.2rem;line-height:0.2rem;padding:0.18rem 0;}
.tabHead span:nth-child(2){width:33.4%;}
.tabHead small{font-size:0.173333rem;display:block;}
.tabHead .active{color:#ff6e2b;}
.tabHead .border{position:absolute;bottom:-1px;left:0;z-index:5;width:33.3%;height:4px;background:#ff6e2b;-ms-transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);}
.khfxWarp{padding-top:0.766667rem}
.khfxPane{display:none;}
.khfxRow{position:relative;background:#fff;margin:0.133333rem;padding:0 0.2rem;}
.khfxRow header{overflow:hidden;font-size:0.16rem;color:#666666;line-height:0.4rem;}
.khfxRow header span{font-size:0.173333rem;color:#ff6e2b;float:right;}
.khfxRow .mid{position:relative;padding:0.2rem 0;padding-left:0.56rem;overflow:hidden;}
.khfxRow .photo{position:absolute;top:0.2rem;left:0;height:0.426667rem;width:0.426667rem;border-radius:100%;}
.khfxRow .mid span{display:block;width:50%;float:left;line-height:0.2rem;padding-top:0.026667rem;color:#222;}
.khfxRow .mid label{color:#999;}
.khfxRow footer{position:relative;line-height:0.6rem;font-size:0.2rem;text-align:center;}
.khfxRow footer a{display:block;color:#ff6e2b;position:relative;z-index:5;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
51.16 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
51.16 KB
立即下载
章雪聪思
了解
打赏作者 鼓励作者
html5特效
最新结算
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
打赏文章