jquery + PHP realisiert einen dynamischen digitalen Anzeigeeffekt-js-Tutorial-php.cn

jquery + PHP realisiert einen dynamischen digitalen Anzeigeeffekt

php中世界最好的语言

Freigeben： 2018-04-24 11:24:03

Original

1996 Leute haben es durchsucht

Dieses Mal werde ich Ihnen jQuery + PHP vorstellen, um einen dynamischen digitalen Anzeigeeffekt zu erzielen. Was sind die Vorsichtsmaßnahmen für JQuery + PHP, um einen dynamischen digitalen Anzeigeeffekt zu erzielen? sehen.

Manchmal müssen wir die Anzahl der Besuche, Downloads und andere Effekte dynamisch anzeigen. Wir können jQuery in Kombination mit Hintergrund-PHP verwenden, um einen rollierenden digitalen Anzeigeeffekt zu erzielen.

Dieser Artikel verwendet die Echtzeiterfassung der Anzahl der Downloads eines Produkts als Szenario. Die Rezeption führt regelmäßig

Javascript aus, um das zu erhalten Aktuelle Anzahl der Downloads anzeigen und scrollen, um die Downloadhäufigkeit auf der Seite zu aktualisieren.
HTMLWir laden zuerst die jQuery-Bibliotheksdatei und das animierte Hintergrund-Plug-in: animate
Background-plugin.js.

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

Nach dem Login kopieren

Dann fügen wir das

HTML-Element hinzu, um den digitalen Scrolleffekt an der entsprechenden Position auf der Seite anzuzeigen.

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

Nach dem Login kopieren

jQuerySchreiben wir zunächst eine Funktion show_num(), die zur Implementierung dynamischer rollierender Zahlen verwendet wird. Wir teilen die statistische Zahl n in einzelne Zahlen auf. Diese Zahlen werden von umgeben und das Bild wird auf jeder entsprechenden Zahl positioniert, indem das Plug-in „backgroundPosition“ aufgerufen wird.

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(){} 
    ); 
  } 
}

Nach dem Login kopieren

Als nächstes erhalten wir über Ajax die neueste Download-Zählung im Hintergrund. Der folgende Code ist eine häufige jQuery-Ajax-Anfrage. Durch

Post-Anfrage an data.php, data.php oder Abrufen der neuesten Anzahl von Downloads wird die Anzahl der Downloads ermittelt , und dann show_num() aufrufen, implementiert numerisches Scrollen.

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

Nach dem Login kopieren

Schließlich müssen wir die Daten initialisieren, nachdem die Seite geladen wurde, und dann alle 3 Sekunden eine Ajax-Anfrage ausführen, um die Anzahl der Downloads zu aktualisieren:

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

Nach dem Login kopieren

Ähnlich gilt: Sie können die Anzahl der Besuche, die Videowiedergabezeit, den Countdown usw. darüber informieren, wie die Daten im Hintergrund verarbeitet werden. Dies würde den Rahmen dieses Artikels sprengen ein Hintergrundprogramm wie ein Zähler, um data.count zurückzugeben.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

JQuery-Animationseffekt-Bildkarussell-Implementierung (mit Code)

jQuery-Bildkarussell-Diashow Filmeffekt

Das obige ist der detaillierte Inhalt vonjquery + PHP realisiert einen dynamischen digitalen Anzeigeeffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!