jQuery数字滚动插件rollNumber(原创)

小麦子 发表于 2024-12-8 11:46:51

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>数字翻转</title>
<meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
   name="viewport" />
<style>
   body {
         min-height: 60vh;
         background: #333333;
         display: flex;
         justify-content: center;
         align-items: center;
   }

   .content {
         display: flex;
         justify-content: flex-start;
         align-items: center;
   }

   .content-item {
         width: 36px;
         height: 40px;
         text-align: center;
         line-height: 40px;
         font-size: 22px;
         font-family: PangMenZhengDao;
         font-weight: bold;
         color: #12F6FE;
         background: rgba(11, 51, 107, 0);
         border: 1px solid #00FFF6;
   }

   .content-item+.content-item {
         margin-left: 4px;
   }
</style>
<link rel="stylesheet" href="https://www.jq22.com/demo/rollNumber202305120959/rollNumber/index.css">
</head>

<body>

<div id="rollNumberList" class="content">
   <div class="content-item">0</div>
   <div class="content-item">0</div>
   <div class="content-item">0</div>
   <div class="content-item">0</div>
   <div class="content-item">0</div>
   <div class="content-item">0</div>
   <div class="content-item">0</div>
   <div class="content-item">0</div>
</div>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://www.jq22.com/demo/rollNumber202305120959/rollNumber/index.js"></script>
<script>
   let num = 300
   let update = $("#rollNumberList").rollNumber({ num })
   setInterval(() => {
         update(num += Math.floor(Math.random() * (4000 - 3000) + 3000))
   }, 3000)
</script>
</body>

</html>

mm6688 发表于 2024-12-20 21:57:43

非常经典的一款对联广告代码

1633328963 发表于 2024-12-24 06:12:28

这个板子不错谢谢分享，支持牛牛论坛

页: [1]

牛牛论坛's Archiver

jQuery数字滚动插件rollNumber(原创)