?
Path : /home/admin/public_html/old/board/modules/mod_spcounter/tmpl/ |
Current File : /home/admin/public_html/old/board/modules/mod_spcounter/tmpl/default.php |
<?php defined( '_JEXEC' ) or die( 'Restricted access' ); ?> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <style type="text/css"> #countercontainer{width:100%;} #counter{width:224px;height:110px;margin:0 auto;} .counterdigit{float:left;background:url("<?php echo JURI::base()."modules/mod_spcounter/tmpl/img/filmstrip.png";?>") 0 0 no-repeat;width:53px;height:103px} .counterseperator{float:left;background:url("<?php echo JURI::base()."modules/mod_spcounter/tmpl/img/comma.png";?>") 2px 75px no-repeat;width:12px;height:103px} #counter_copyright{text-align: center; margin:0 auto;} </style> <div id="counter_container"> <div id="counter"> <!--<li id="d9"></li> <li class="seperator"></li> <li id="d8"></li> <li id="d7"></li> <li id="d6"></li> <li class="seperator"></li> <li id="d5"></li> <div class="counterdigit" id="d4"></div>--> <div class="counterdigit" id="d3"></div> <div class="counterseperator"></div> <div class="counterdigit" id="d2"></div> <div class="counterdigit" id="d1"></div> <div class="counterdigit" id="d0"></div> </div> <div id="counter_copyright"> <p style="font-size: smaller;">© by <a href="http://www.splabs.it">SPLabs</a></p> </div> </div> <script type="text/javascript"> // Array to hold each digit's starting background-position Y value var initialPos = [0, -618, -1236, -1854, -2472, -3090, -3708, -4326, -4944, -5562]; // Amination frames var animationFrames = 5; // Frame shift var frameShift = 103; // Starting number var theNumber = <?php echo $params->get( 'startnum', '0' ); ?>; // Increment var increment = <?php echo $params->get( 'increment', '1' ); ?>; // Pace of counting in milliseconds var pace = <?php echo $params->get( 'interval', '1000' ); ?>; // Initializing variables var digitsOld = [], digitsNew = [], subStart, subEnd, x, y; // Function that controls counting function doCount(){ var x = theNumber.toString(); if(<?php echo $params->get( 'countOnOff', '1000' ); ?>) theNumber += increment; var y = theNumber.toString(); digitCheck(x,y); } // This checks the old count value vs. new value, to determine how many digits // have changed and need to be animated. function digitCheck(x,y){ var digitsOld = splitToArray(x), digitsNew = splitToArray(y); for (var i = 0, c = digitsNew.length; i < c; i++){ if (digitsNew[i] != digitsOld[i]){ animateDigit(i, digitsOld[i], digitsNew[i]); } } } // Animation function function animateDigit(n, oldDigit, newDigit){ // I want three different animations speeds based on the digit, // because the pace and increment is so high. If it was counting // slower, just one speed would do. // 1: Changes so fast is just like a blur // 2: You can see complete animation, barely // 3: Nice and slow var speed; switch (n){ case 0: speed = pace/8; break; case 1: speed = pace/4; break; default: speed = pace/2; break; } // Cap on slowest animation can go speed = (speed > 100) ? 100 : speed; // Get the initial Y value of background position to begin animation var pos = initialPos[oldDigit]; // Each animation is 5 frames long, and 103px down the background image. // We delay each frame according to the speed we determined above. for (var k = 0; k < animationFrames; k++){ if(oldDigit<newDigit) pos = pos - frameShift; else pos = pos + frameShift; if (k == (animationFrames - 1)){ (jQuery)("#d" + n).delay(speed).animate({'background-position': '0 ' + pos + 'px'}, 0, function(){ // At end of animation, shift position to new digit. (jQuery)("#d" + n).css({'background-position': '0 ' + initialPos[newDigit] + 'px'}, 0); }); } else{ (jQuery)("#d" + n).delay(speed).animate({'background-position': '0 ' + pos + 'px'}, 0); } } } // Splits each value into an array of digits function splitToArray(input){ var digits = new Array(); for (var i = 0, c = input.length; i < c; i++){ subStart = input.length - (i + 1); subEnd = input.length - i; digits[i] = input.substring(subStart, subEnd); } return digits; } // Sets the correct digits on load function initialDigitCheck(initial){ var digits = splitToArray(initial.toString()); for (var i = 0, c = digits.length; i < c; i++){ (jQuery)("#d" + i).css({'background-position': '0 ' + initialPos[digits[i]] + 'px'}); } } jQuery.noConflict(); (function($) { initialDigitCheck(theNumber); setInterval(doCount, pace); })(jQuery); </script>