前端网页开发实现会员等级进度的效果

前端开发效果实例|web前端开发师岗位职责|前端开发的工作要求

展示大概一个思路:

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
<metacharset=”UTF-8″>
<title>开发前端的 工具:会员等级</title>
<style>
*{
margin:0;
padding:0;
}
.mature-progress{
margin-top:15px;
}
.mature-progress.mature-progress-top{
position:relative;
padding-left:15px;
font-size:18px;
height:40px;
line-height:40px;
}
.mature-progress.mature-progress-top:before{
content:”;
display:block;
position:absolute;
width:8px;
height:20px;
left:0;
top:10px;
background:#e10482;
border-radius:5px;
}
.mature-progress.mature-progress-bottom{
border-radius:5px;
border:#f2f2f2solid1px;
padding:15px;
position:relative;
height:125px;
width:720px;
}
.mature-progress.mature-progress-bottomp>span{
color:#e10482;
}
.mature-progress.mature-progress-bottom.mature-progress-box{
height:105px;
padding:10px0010px;
position:absolute;
top:60px;
}
.mature-progress.mature-progress-bottom.mature-progress-box.bgtwos{
z-index:1;
top:55px;
}
.mature-progress.mature-progress-bottom.mature-progress-box.bgtwosdldt{
border:#f2f2f2solid5px;
}
.mature-progress.mature-progress-bottom.mature-progress-box.v0dl:nth-of-type(1)dt{
background:#e10482;
}
.mature-progress.mature-progress-bottom.mature-progress-box.v1dl:nth-of-type(2)dt{
background:#e10482;
}
.mature-progress.mature-progress-bottom.mature-progress-box.v2dl:nth-of-type(3)dt{
background:#e10482;
}
.mature-progress.mature-progress-bottom.mature-progress-box.v3dl:nth-of-type(4)dt{
background:#e10482;
}
.mature-progress.mature-progress-bottom.mature-progress-box.v4dl:nth-of-type(5)dt{
background:#e10482;
}
.mature-progress.mature-progress-bottom.mature-progress-boxdl{
width:70px;
text-align:center;
float:left;
margin-right:65px;
}
.mature-progress.mature-progress-bottom.mature-progress-boxdldt{
width:40px;
height:40px;
background:#999999;
color:#fff;
text-align:center;
line-height:44px;
border-radius:50%;
margin:0auto;
overflow:hidden;
position:relative;
z-index:3;
}
.mature-progress.mature-progress-bottom.mature-progress-boxdldd{
padding-top:5px;
}
.mature-progress.mature-progress-bottom.mature-progress-box.progress-box{
position:absolute;
width:676px;
height:15px;
border-radius:10px;
border:#f2f2f2solid5px;
background:#fff;
z-index:2;
top:20px;
left:22px;
}
.mature-progress.mature-progress-bottom.mature-progress-box.progress-boxi{
position:absolute;
height:15px;
background:#e10482;
left:36px;
top:0;
width:0;
}
.mature-progress.mature-progress-bottom.mature-progress-box.progress-boxi.progress-box-2{
left:171px;
}
.mature-progress.mature-progress-bottom.mature-progress-box.progress-boxi.progress-box-3{
left:305px;
}
.mature-progress.mature-progress-bottom.mature-progress-box.progress-boxi.progress-box-4{
left:440px;
}
.mature-progress.mature-progress-bottom.mature-progress-box.progress-boxi.progress-box-5{
left:576px;
}
.mature-progress.mature-progress-bottom.mature-progress-box.progress-boxispan{
position:absolute;
display:inline-block;
*zoom: 1;
*display: inline;
background:#fff;
border-radius:5px;
height:30px;
line-height:30px;
font-weight:normal;
font-size:12px;
font-style:normal;
border:#ccccccsolid1px;
right:-80px;
top:-50px;
padding:010px;
width:135px;
text-align:center;
}
.mature-progress.mature-progress-bottom.mature-progress-box.progress-boxispan:before{
content:”;
display:block;
position:absolute;
border-width:10px;
border-style:solid;
border-color:#ccctransparenttransparenttransparent;
bottom:-20px;
left:50%;
margin-left:-10px;
}
.mature-progress.mature-progress-bottom.mature-progress-box.progress-boxispan:after{
content:”;
display:block;
position:absolute;
border-width:10px;
border-style:solid;
border-color:#ffftransparenttransparenttransparent;
bottom:-19px;
left:50%;
margin-left:-10px;
}
</style>
<script src=”http://libs.baidu.com/jquery/1.10.2/jquery.min.js”></script>
</head>
<body>
<div class=”mature-progress”>
<div class=”mature-progress-bottom”>
<!– 等级样式 v0 v1 v2 v3 v4 v5 –>
<divclass=”mature-progress-box v0″ id=”mamture_progress”>
<dl>
<dt>0</dt>
<dd>
<spanclass=”member-ico v0″></span>小妞</dd>
</dl>
<dl>
<dt>200</dt>
<dd>
<spanclass=”member-ico v1″></span>菇凉</dd>
</dl>
<dl>
<dt>1000</dt>
<dd>
<spanclass=”member-ico v2″></span>公举</dd>
</dl>
<dl>
<dt>5000</dt>
<dd>
<spanclass=”member-ico v3″></span>女神</dd>
</dl>
<dl>
<dt>10000</dt>
<dd>
<spanclass=”member-ico v4″></span>女王</dd>
</dl>
<divclass=”progress-box” id=”progress_content” data-progress=”8000″>
<iclass=”progress-box-1″></i>
<!– 200 –>
<iclass=”progress-box-2″></i>
<!– 1000 –>
<iclass=”progress-box-3″></i>
<!– 5000 –>
<iclass=”progress-box-4″></i>
<!– 10000 –>
<iclass=”progress-box-5″></i>
<!– 10000+ –>
</div>
</div>
<divclass=”mature-progress-box bgtwos”>
<dl>
<dt></dt>
</dl>
<dl>
<dt></dt>
</dl>
<dl>
<dt></dt>
</dl>
<dl>
<dt></dt>
</dl>
<dl>
<dt></dt>
</dl>
</div>
</div>
</div>
<script type=”text/javascript”>
;
(function () {
varmamture_progress=$(‘#mamture_progress’);
varprogress_content=$(‘#progress_content’);
varl=0;
var_number=progress_content.attr(‘data-progress’);
vartimer=null;
varpro=0;
if (_number<200) {
lad(_number,200,’.progress-box-1′,function(){
$(‘.progress-box-1’).append(‘<span>再消费’+ (200-_number) +’元即可升级</span>’);
});
};
if (_number>=200&&_number<1000) {
lad(200,200,’.progress-box-1′,function(){
mamture_progress.addClass(‘v1’);
lad(_number-200,1000-200,’.progress-box-2′,function(){
$(‘.progress-box-2’).addClass(‘active’);
$(‘.progress-box-2’).append(‘<span>再消费’+ (1000-_number) +’元即可升级</span>’);
});
});
};
if (_number>=1000&&_number<5000) {
lad(200,200,’.progress-box-1′,function(){
mamture_progress.addClass(‘v1’)
lad(1000,1000,’.progress-box-2′,function(){
mamture_progress.addClass(‘v2’);
lad(_number-1000,5000-1000,’.progress-box-3′,function(){
$(‘.progress-box-3’).addClass(‘active’);
$(‘.progress-box-3’).append(‘<span>再消费’+ (5000-_number) +
‘元即可升级</span>’);
})
});
});
};
if (_number>=5000&&_number<10000) {
lad(200,200,’.progress-box-1′,function(){
mamture_progress.addClass(‘v1’)
lad(1000,1000,’.progress-box-2′,function(){
mamture_progress.addClass(‘v2’)
lad(5000,5000,’.progress-box-3′,function(){
mamture_progress.addClass(‘v3’)
lad(_number-5000,10000-5000,’.progress-box-4′,function(){
$(‘.progress-box-4’).addClass(‘active’);
$(‘.progress-box-4’).append(‘<span>再消费’+ (10000-
_number) +’元即可升级</span>’);
})
})
});
});
};
if (_number>=10000) {
lad(200,200,’.progress-box-1′,function(){
mamture_progress.addClass(‘v1’)
lad(1000,1000,’.progress-box-2′,function(){
mamture_progress.addClass(‘v2’)
lad(5000,5000,’.progress-box-3′,function(){
mamture_progress.addClass(‘v3’)
lad(10000,10000,’.progress-box-4′,function(){
mamture_progress.addClass(‘v4’)
lad(_number-10000,10000000,’.progress-box-5′)
})
})
});
});
};
/*
@number : 成长值
@max : 最大值
@callback : 回调方法
*/
functionlad(number,max,cls,callback){
l=0;
timer=setInterval(function(){
if (number<=200) {
l++;
}elseif (number>200&&number<=1000) {
l+=5;
}elseif (number>1000&&number<=5000) {
l+=10;
}elseif (number>5000&&number<=10000) {
l+=20;
}else{
l+=30;
};
pro= (l/max) *100;//100为 div的长度
if (l>=number) {
clearInterval(timer);
if (callback) callback();//回调
};
$(cls).css({
width: pro + ‘px’
})
},1)
}
})();
</script>
</body>
</html>
前端css开发实例|web前端开发就业怎样?|女生做前端开发适合
» 本文来自:前端开发者 » 《前端网页开发实现会员等级进度的效果》
» 本文链接地址:https://www.rokub.com/3757.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!