Statistics scrolling effect of jquery visits, downloads, etc.

Source: Internet
Author: User
Tags jquery library

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

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",
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, and author have copyright, if need to reprint, please indicate from and keep the original link, otherwise as infringement.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.