大屏文字滚动效果

<html>

<head>

.colum{

float: left;

text-align: center;

width: 40px;

line-height: 40px;

font-size: 18px;

background: rgb(26, 26, 159);

margin: 10px;

color: white;

height: 40px;

overflow: hidden;

}

</style>

</head>

<body>

</body>

function initnum(e, val){

var numarr = (val+'').split('');

var numcontent = '';

for(var i=0;i<numarr.length;i++){

numcontent += '<div class="colum"><div class="row" style="margin-top:'+-numarr[i]*40+'px">0</div><div class="row">1</div><div class="row">2</div><div class="row">3</div><div class="row">4</div><div class="row">5</div><div class="row">6</div><div class="row">7</div><div class="row">8</div><div class="row">9</div></div>'

}

$('#'+e).html(numcontent);

}

function animal(e, start, end){

var startarr = (start + '').split('');

var endarr = (end + '').split('');

var instance = endarr.length-startarr.length;

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

$('#'+e).prepend('<div class="colum"><div class="row" style="margin-top:'+-(instance-endarr[i])*40+'px">0</div><div class="row">1</div><div class="row">2</div><div class="row">3</div><div class="row">4</div><div class="row">5</div><div class="row">6</div><div class="row">7</div><div class="row">8</div><div class="row">9</div></div>')

}

for(var j=0;j<endarr.length;j++){

$($($('#'+e+' .colum')[j]).find('.row')[0]).animate({marginTop: -endarr[j]*40+'px'})

}

var numcontroller = {

init: initnum,

animal: animal

}

numcontroller.init('num', 11000);

// numcontroller.animal('num', 12900, 2008900);

function loopanimal(e, start, end, time){

var randomnum = Math.floor(Math.random()*(end-start)/time, 0);

setInterval(function(){

numcontroller.animal(e, start, start-0+randomnum);

start = start+randomnum;

}, 3000);

}

loopanimal('num', 11000, 2008900, 60);

</script>

</html>

摘抄原文：https://www.cnblogs.com/windseek/p/10594799.html

posted @ 2023-02-02 14:35 webJ 阅读(130) 评论(0) 收藏举报

刷新页面返回顶部

大屏文字滚动效果

公告