每天学一个jquery插件-记分牌效果
记分牌效果
嗯，一个很常见的效果，实现起来很简单，简单记个笔记，就是那种记分牌的滚动效果
效果如下
代码如下
html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>记分牌实现</title>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/jfpsx.js"></script>
<link href="css/jfpsx.css" rel="stylesheet" type="text/css" />
<style>
#div{
border: 1px solid lightgray;
height: 50px;
width: 400px;
margin:50px auto;
}
</style>
</head>
<body>
<div id="div"></div>
</body>
</html>
<script>
$(function(){
var temp = jfpsx("div");
setInterval(function(){
var num = Math.floor(Math.random()*1000000000);
temp.load(num.toString())
},1000)
})
</script>
css部分
*{
margin: 0;
padding: 0;
}
.fz{
overflow: hidden;
}
.items{
width: 40px;
float: left;
margin-top: 0px;
transition: all 0.5s;
}
.item{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 50px;
font-size: 18px;
font-weight: bold;
}
js部分
var jfpsx = function(id) {
var $id = $("#" + id);
$id.addClass("fz");
var $doms = [];
for (var i = 0; i < 10; i++) {
var $items = $("<div class='items'></div>")
for (var j = 0; j <= 9; j++) {
var $item = $("<div class='item'>" + j + "</div>")
$item.appendTo($items);
}
$items.appendTo($id);
$doms.push($items);
}
return {
$id: $id,
$doms: $doms,
load: function(str) {
var that = this;
while (str.length != 10) {
if (str.length < 10) {
str = "0" + str;
}
if (str.length > 10) {
str = str.substr(1);
}
}
var arr = str.split("");
for(var i = 0;i<arr.length;i++){
var temp = that.$doms[i];
var index = parseInt(arr[i])
temp.css({
"margin-top":(-50)*index+"px"})
}
}
}
}
- 首先确定容器，计算大小和各个最小格子的大小，但是我这里面是写死的
- 然后确定要绘制多少位的记分牌，那就做多少个容器填进去浮动并排
- 容器里面再填上0~9的数字，每个格子是算好的大小
- 然后将渲染好的dom留下，再接收要变换的数字 ，对数字进行补位或者截取以满足目标位数的情况
- 然后再遍历这个字串的每一个字符，想象这是一个卡在只有一部分卡在看的见得地方的纸条，直接给margin-top就是把这个纸条往上扯几个格子，以展示正确的位置的数字
- 完事，碎觉