count rolling motion

count rolling

 

아래코드는 나름 여기저기서 쓰이는 거 같아서 필받아서 함 코딩 해봤다 크로스 브라우징 및 단위테스트는 안해봤다. 

그닥 최적화하기가...... 

귀찮음.. 까먹을까바 걍 올려놓는다.....

 

 

- html

<div class="container"></div>

 

-style

<style>
body{font-family:Verdana, Arial, Helvetica, sans-serif}
.container{font-weight:bold}

.disitContainer{width:25px;height:48px;overflow:hidden;}
.disitContainer .disit{height:auto}
.disitContainer .disit .txt{display:block;padding:2px 0;font-size:36px}
</style>

 

 

-javascript

//jQuery 기반으로 작업했다.

function DisitCal() {

var _container=null;
var _th=0;

this.getContainer=function(){
return _container;
}

this.setContainer=function( cont ){
_container=$( cont );
}
this.getHeight=function(){
return _th;
}
this.setHeight=function(th){
_th=th;
}
}

DisitCal.prototype.init=function( container ){

this.setContainer( container );

var innerText ="<div class='disit'>";
for(var i= 0,len=10;i<len;i++){
innerText+= "<span class='txt'>"+i+"<br/></span>";
}
innerText+="</div>";

this.getContainer().html(innerText);

this.setHeight( $(" .disit .txt").height() );

}

DisitCal.prototype.run=function( value, delayCount ){

var mgt=(this.getHeight()+4)*-1*value;
this.getContainer().children().stop(true, false)
.delay(delayCount).animate( {marginTop:mgt},1000 );

}

var resultDisit=[48950, 145, 234, 23, 5];

window.onload=function(){

function getNumLen(value){
return String(value).length;
}

function numberPos( value ){

var tagetNum=value;

var len=getNumLen( tagetNum );
var container=$(".container");
var innerTxt="";
for( var i=0;i<len;i++){
innerTxt+="<div class='disitContainer'></div>";
}
container.html(innerTxt);

var disitList=$(".disitContainer");

disitList.each( function(i, item){
var disitCal=new DisitCal();
disitCal.init( item );
$(this).css({float:"left"});
var value=parseInt( String(tagetNum).substr(i, 1));
disitCal.run( value, 400*i );
});

}

numberPos( resultDisit[0] );

}

 

아래는 실행되는 모습이다. 모션이 이미 끝났다면 새로고침 해보면 알 수 있다.