jquery - javascript display numbers as picture with animation -
i display numbers pictures. numbers included in 1 picture.
i started creating span each number , each span different class can alter image right number style attribute "background-position".
this working me. add together little animation numbers count right value. can 1 span (number) how can numbers?
html:
<style> .digit0 { background-position: 0 0; } .digit1 { background-position: 0 -120px; } .digit2 { background-position: 0 -240px; } .digit3 { background-position: 0 -360px; } .digit4 { background-position: 0 -480px; } .digit5 { background-position: 0 -600px; } .digit6 { background-position: 0 -720px; } .digit7 { background-position: 0 -840px; } .digit8 { background-position: 0 -960px; } .digit9 { background-position: 0 -1080px; } </style> </head> <body> <h1>examples</h1> <p> <div id="number">here</div> </p> </body> javascript:
<script type="text/javascript"> $(document).ready(function(){ // code here var dd = "5487"; dd = dd.replace(/(\d)/g, '<span class="digit0" id="count$1" style="display: inline-block; height: 20px; line-height: 40px; width: 14px; vertical-align: middle; text-align: center; font: 0/0 a; text-shadow: none; background-image: url(../src/jquery.counter-analog.png); color: transparent; margin: 0;"></span>'); $("#number").html(dd); count = $("#count4").attr("id").replace("count", "").tostring(); var = 0; setinterval(function() { counter(); }, 100); function counter() { if(i < count) { i++; $("#count4").attr("class", "digit" + + ""); } } }); </script>
this not possible using pure javascript.
what you're asking have performed server-side using php's gd.
javascript jquery
No comments:
Post a Comment