Statistics scrolling effect of jquery visits, downloads, etc.

Sometimes we need dynamic display visits, download times and other effects, we can use jquery combined with background PHP to achieve a scrolling digital display effect. This article will combine the example using jquery background animation plug-in, the number as a background image, timed to let the background picture scrolling, so as to achieve the effect of scrolling numbers.

This article takes a real-time download of a product as a scenario, the foreground executes JavaScript regularly to get the latest downloads, and scrolls the number of downloads on the page. View Demos Demo HTML

We first load the jquery library file and the animated background plugin: Animatebackground-plugin.js.

<script type= "Text/javascript" src= "Js/jquery.js" ></script>
<script type= "Text/javascript" src= "Js/animatebackground-plugin.js" ></script>

Then we add the HTML element to show the digital scrolling effect in the appropriate location of the page.

<div id= "Total" >
Download Volume: <span class= "T_num" ></span> Times
</div>

JQuery

First, write a function show_num (), which is used to implement dynamic scrolling numbers. We split the statistics n into individual numbers, which are surrounded by <i></i>, and the images are positioned to each number by calling the plugin backgroundposition.

function Show_num (n) {
var it = $ (". T_num i");
var len = String (n). length;
for (Var i=0;i<len;i++) {
if (it.length<=i) {
$ (". T_num"). Append ("<i></i>");
}
var num=string (n). charAt (i);
var y =-parseint (num) *30; Y-Axis position
var obj = $ (". T_num i"). EQ (i);
Obj.animate ({//Scrolling animation
backgroundposition: ' (0 ' +string (y) + ' px) '
}, ' Slow ', ' Swing ', function () {}
);
}
}

Next, we get the latest download times in the background via Ajax. The following code is a common jquery Ajax request, either through a POST request to data.php,data.php or get the most recent download count, and after processing succeeds it gets the number of downloads: Data.count, and then calls Show_num () to implement digital scrolling.

function GetData () {
$.ajax ({
URL: ' data.php ',
Type: ' POST ',
DataType: "JSON",
Cache:false,
timeout:10000,
Error:function () {},
Success:function (data) {
Show_num (Data.count);
}
});
}

Finally, we initialize the data after the page is loaded, and then execute the AJAX request every 3 seconds, updating the number of downloads:

$ (function () {
GetData ();
SetInterval (' GetData () ', 3000);//Run once every 3 seconds
});

Similar can be in the statistics of website visits, statistics of the number of videos played, Countdown and other aspects of application, as to the background data.php how to deal with the data is not within the scope of this article, interested students can write their own such as counters such as a background program to return to Data.count. Disclaimer: This article is original article, helloweba.com and author have copyright, if need to reprint, please indicate from helloweba.com and keep the original link, otherwise as infringement.