jquery实现数字滚动效果

因为需要，自己用jquery动手写了数字滚动效果

实现原理

1、先确定数字最大的位数，比如说最大数为6位数，就画出一排6个高度为30px的方格;

2、然后在每个方格区域增加一竖排的 0123456789，定时更新数字，转成字符串获取位数，确定每位上的数字大小，然后和当前的数字大小进行比较，最后使用animate方法更改marginTop距离顶部的大小，来实现数字滚动效果。全部代码如下: （jquery文件请自行引入）

效果图

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.number {background: #00BBEC;text-align: center;height: 30px;line-height: 30px;font-size: 14px;overflow: hidden;margin-left: 0.15rem;color: #000000;padding: 0 20px;display: inline-block;}</style>
</head>
<body>
<div class="price-div" id="container1"></div>
<div class="price-div" id="container2"></div>
<script src="js/jquery-1.11.3.min.js"></script>
<script>var rollInterval, total = 0;initPage($('#container1'), 6); // 初始化滚动数字最大的位数initPage($('#container2'), 6); // 初始化滚动数字最大的位数var numItemHeight = $('.num-item').eq(0).height(); // 获取数字dom的高度rollInterval = setInterval(fun, 1000); // 定时获取实时数据，实现数字滚动function fun() {total = total + 10;numberRoll($('#container1'), total);numberRoll($('#container2'), Math.floor(Math.random() * 1000000));}function numberRoll(container, total) {var number = total.toString().split("").reverse().join("");for (var i = 0; i < number.length; i++) {// 目标值如果比原本值大，则向上滚动，如果小则向下滚动（0 -> 3 从下往上滚动3个单元格高度 margeTop = -90px 反之 从上往下滚3个单元格高度 margeTop = 90px）var height = parseInt(number[i]) * numItemHeight;$(container).find('.num' + i + ' .numbers-view').animate({marginTop: -height}, 1000, "swing");}}function initPage(container, digit) {var uId = generateUniqueId();// $(container).attr('id', uId);var _html = '';for (var i = digit - 1; i >= 0; i--) {_html += '<div class="number num' + i + '">' +'<div class="numbers-view">' +'<div class="num-item zero">0</div>' +'<div class="num-item one">1</div>' +'<div class="num-item two">2</div>' +'<div class="num-item three">3</div>' +'<div class="num-item four">4</div>' +'<div class="num-item five">5</div>' +'<div class="num-item six">6</div>' +'<div class="num-item seven">7</div>' +'<div class="num-item eight">8</div>' +'<div class="num-item nine">9</div>' +'</div>' +'</div>';}container.html(_html);};// 生成唯一主键idfunction generateUniqueId() {var d = new Date().getTime();var uuid = 'xxxxxxxx_xxxx_4xxx_yxxx_xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {var r = (d + Math.random() * 16) % 16 | 0;d = Math.floor(d / 16);return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);});return uuid;};</script>
</body>
</html>

jquery实现数字滚动效果相关推荐

js、jQuery实现数字滚动效果
一.效果(监听页面滚动使得超过屏幕的数字每次出现都有数字滚动效果) 二.代码在滚动数字的标签上加上类名counter <div class="about_right flex5&qu ...
jQuery数字滚动效果
jQuery数字滚动效果## 引入jQuery <script src="js/jquery.min.js"></script> body <div ...
jQuery图标数字滚动计数代码
jQuery图标数字滚动计数代码 jQuery基于css3属性制作图标和数字结合布局,默认数字滚动计数效果代码. 演示地址下载地址
vue做数字滚动效果
vue实现数字滚动效果近期在做项目的时候,产品要求实现数字滚动效果如下: 用jquery实现 html: <div class="develop"> <!--滚 ...
html数字自动滚动代码怎么写,你可能需要这样的大屏数字滚动效果
大屏数字滚动效果来源于最近工作中一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果,以下是最终实现的效果: 思路在实现此效果之前,我们先来捋一下思路,用思维导图来设计一下我们的实现步骤, ...
【网站】数字滚动效果的实现方法
代码如下: HTML部分: <div class="box Counter"><ul class="clearfix"><li&g ...
html横向滚动字幕代码,jQuery文字横向滚动效果的实现代码
很多网站都有公告,并且都喜欢用横向滚动的方式来展现.最近自己用jQuery也写了文字横向滚动,实现了自定义滚动速度,鼠标经过时暂停的功能. HTML代码如下: jQuery文字横向滚动jQuery制作 ...
初级开发者福音：手把手教你实现数字滚动效果~
文章目录一.前言二.背景知识三.实现方案 Step 1:分析需求 Step 2:实现单个数字的滚动效果 Step 3:组件接口设计 Step 4:完善组件一.前言前端数字滚动显示的场景很多, ...
vue数字滚动效果组件
数字滚动变化效果组件效果预览体验地址用途大屏展示,数字滚动效果实现使用js控制元素移动. 关键代码如下: //修改 chang(oldVal,newVal,id){if(oldVal & ...

jquery实现数字滚动效果

jquery实现数字滚动效果相关推荐

最新文章

热门文章