每天一个jquery插件-做个进度条
做个进度条
今天时间不多，想来想去就简单的做个记录吧
效果如下
代码部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>做个进度条</title>
<script src="js/jquery-3.4.1.min.js"></script>
<style>
*{
margin: 0px;
padding: 0px;
user-select: none;
}
.body{
border: 1px solid lightgray;
width: 95%;
margin: 10px auto;
padding: 5px;
height: 20px;
}
.bar{
height: 100%;
width: 50%;
background-color: #3498db;
font-size: 12px;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.5s linear;
color: white;
}
.bar.wl{
background-image: url(img/wl.png);
background-size: 25px 25px;
animation:wl 0.5s linear infinite;
}
@keyframes wl{
from{
background-position-x: 0px;
}
to{
background-position-x:20px;
}
}
</style>
</head>
<body>
<li>一个普通的</li>
<div class="body">
<div class="bar"></div>
</div>
<li>带动态纹路的</li>
<div class="body">
<div class="bar wl"></div>
</div>
<li>里面带数值的</li>
<div class="body">
<div class="bar val"></div>
</div>
</body>
</html>
<script>
$(function(){
//调用
var bars = $(".bar");
for(var i=0;i<bars.length;i++){
kz(bars[i]).load();
}
//随机产生进度条
function kz(dom){
return{
$dom:$(dom),
load:function(){
var that =this;
setInterval(function(){
var temp = Math.floor(Math.random()*100)+1;
that.$dom.css("width",temp+"%");
if(that.$dom.hasClass("val")){
that.$dom.text(temp+"%");
}
},1000)
}
}
}
})
</script>
思路解释
- 就是实现一下最简单的几种进度条效果，没有封装，都比较好理解
- 第一个就是普通的额进度条，实际上就是两层div套起来，里面的一个div加上颜色动态变化自己长度就行了
- 第二个就是带纹路的进度条，实际上就是给背景色的同时给上条纹图片，当然用动画帧控制里面动起来就是动态纹路效果了
- 第三个就是带数值的进度条，实际上就是给div一个东西啥都居中的定位，然后给里面替换数值就行了
- 完事，碎觉~