jquery php melaksanakan penatalan digital effects_jquery

Kadangkala kita perlu memaparkan bilangan lawatan, muat turun dan kesan lain secara dinamik Kita boleh menggunakan jQuery digabungkan dengan php latar belakang untuk mencapai kesan paparan digital bergulir.

Artikel ini menggunakan pemerolehan masa nyata kiraan muat turun produk sebagai senario Bahagian hadapan melaksanakan javascript dengan kerap untuk mendapatkan kiraan muat turun terkini dan mengemas kini kiraan muat turun pada halaman secara bergulir.
HTML
Mula-mula kami memuatkan fail perpustakaan jQuery dan pemalam latar belakang animasi: animateBackground-plugin.js.

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/animateBackground-plugin.js"></script> 

Kemudian kami menambah elemen html untuk menunjukkan kesan tatal digital dalam kedudukan yang sesuai pada halaman.

<div id="total"> 
  下载量：<span class="t_num"></span>次 
</div> 

jQuery
Mula-mula, mari tulis fungsi show_num(), yang digunakan untuk melaksanakan nombor bergolek dinamik. Kami membahagikan nombor statistik n kepada nombor individu ini dikelilingi oleh , dan imej diletakkan pada setiap nombor yang sepadan dengan memanggil Kedudukan latar belakang pemalam.

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轴位置 
    var obj = $(".t_num i").eq(i); 
    obj.animate({ //滚动动画 
      backgroundPosition :'(0 '+String(y)+'px)' 
      }, 'slow','swing',function(){} 
    ); 
  } 
} 

Seterusnya, kami mendapat kiraan muat turun terkini di latar belakang melalui ajax. Kod berikut ialah permintaan ajax jQuery biasa Ia membuat permintaan pos ke data.php, data.php atau memperoleh bilangan muat turun terkini Selepas berjaya diproses, bilangan muat turun diperoleh: data.count, dan kemudian memanggil show_num () untuk melaksanakan tatal digital.

function getdata(){ 
  $.ajax({ 
    url: 'data.php', 
    type: 'POST', 
    dataType: "json", 
    cache: false, 
    timeout: 10000, 
    error: function(){}, 
    success: function(data){ 
      show_num(data.count); 
    } 
    }); 
} 

Akhir sekali, kami perlu memulakan data selepas halaman dimuatkan, dan kemudian melakukan permintaan ajax setiap 3 saat untuk mengemas kini bilangan muat turun:

$(function(){ 
  getdata(); 
  setInterval('getdata()', 3000);//每隔3秒执行一次 
}); 

Begitu juga, ia boleh digunakan dalam statistik lawatan tapak web, masa main balik video, kira detik, dan lain-lain. Bagi cara data backend.php memproses data, ia adalah di luar skop artikel ini. Pelajar yang berminat boleh menulis bahagian belakang sedemikian sebagai program pembilang untuk mengembalikan data.count.

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.