jQuery实现数字滚动效果

网页上如果有数字需要经常变动,又想让它比较明显,肯定是加个动画比较显眼,利用jQuery的animate可以很容易的实现,不需要css3,因此可以兼容低版本的ie浏览器。先看效果图:

演示网址:

代码比较简单,没有整理成插件形式,暂时全堆在html里了。直接上代码:


<!DOCTYPE html>

<html lang="zh-cn">

<head>

<meta charset="utf-8">

<title>jQuery实现数字滚动效果演示</title>

<script src="https://www.linuxidc.com/jquery-1.7.1.min.js"></script>

<style>

.digits{

display:inline-block;

height:30px;

margin-right:50px;

}

.digits i{

background:url(numbers.png) no-repeat;

display:inline-block;

float:left;

height:30px;

width:18px;

}

.digits b{

background:url(numbers.png) no-repeat 0 -398px;

display:inline-block;

float:left;

height:30px;

width:10px;

}

</style>

<script>

function setNumber(dom, number){

var n = String(number),len = n.length;

//如果新的数字短于当前的,要移除多余的i

if(dom.find("i").length > len){

dom.find("i:gt(" + (len - 1) + ")").remove();

}

//移除千分位分隔符

dom.find("b").remove();

//开始填充每一位

for(var i=0;i<len;++i){

//位数不足要补

if(dom.find("i").length < len){

dom.append("<i></i>");

}

var obj = dom.find("i").eq(i);

var y = -40 * parseInt(n.charAt(i), 10);

//加分隔符

if(i < len - 1 && (len - i - 1) % 3 == 0)

$("<b></b>").insertAfter(obj);

//利用动画变换数字

obj.animate({ backgroundPositionY:y+"px" }, 350);

}

};

$(function(){

//测试,每秒更新随机数

window.setInterval(function(){

setNumber($("#a"), Math.floor(Math.random() * 1000000));

setNumber($("#b"), Math.floor(Math.random() * 1000000));

}, 1000);

});

</script>

</head>

<body>

<div></div>

<div></div>

</body>

</html>

代码与资源放在附件里了。

------------------------------------------分割线------------------------------------------

免费下载地址在

用户名与密码都是

具体下载目录在 /2015年资料/8月/20日/jQuery实现数字滚动效果/

下载方法见

------------------------------------------分割线------------------------------------------

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/beed6d8988eb17ba430e254196d0290c.html