每天學一個jquery外掛-記分牌效果
阿新 • • 發佈：2021-01-19
技術標籤：每天學一個jquery外掛javascriptjquery
每天學一個jquery外掛-記分牌效果
記分牌效果
嗯，一個很常見的效果，實現起來很簡單，簡單記個筆記，就是那種記分牌的滾動效果
效果如下
程式碼如下
html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>記分牌實現</title>
<script src="js/jquery-3.4.1.min.js"> css部分
*{ 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就是把這個紙條往上扯幾個格子，以展示正確的位置的數字
- 完事，碎覺