Heim Web-Frontend js-Tutorial jQuery realisiert den Animationseffekt der Zufallszahlenanzeige von Likes (mit Online-Demonstration und Download des Demo-Quellcodes)_jquery

jQuery realisiert den Animationseffekt der Zufallszahlenanzeige von Likes (mit Online-Demonstration und Download des Demo-Quellcodes)_jquery

May 16, 2016 pm 03:22 PM
jquery 动画 点赞

Das Beispiel in diesem Artikel beschreibt den Animationseffekt der von jQuery implementierten Zufallszahlenanzeige von Likes. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Der Screenshot des Laufeffekts sieht wie folgt aus:

Klicken Sie hier, um die Online-Demo anzusehen.

Klicken Sie hier für den vollständigen BeispielcodeDownload von dieser Website.

Der spezifische Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery实现点赞数字累加动画效果</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
html,body{background:#fff;font-size:14px;font-family:"microsoft yahei";}
.tip{text-align:center;padding-top:10%;font-size:2em;}
</style>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$("html,body").on("click",function(e){
  anp(e);
})
function anp(e){
  var n=Math.round(Math.random()*10);
  var $i=$("<b>").text("+"+n);
  var x=e.pageX,y=e.pageY;
  $i.css({top:y-20,left:x,position:"absolute",color:"#E94F06"});
  $("body").append($i);
  $i.animate({top:y-180,opacity:0,"font-size":"1.4em"},1500,function(){
    $i.remove();
  });
  e.stopPropagation();
}
</script>
</head>
<body>
<div class="tip">点击页面任意位置查看效果</div>
</body>
</html>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Was ist der Unterschied zwischen Likes und Love auf einem WeChat-Videokonto? Was ist der Nutzen? Was ist der Unterschied zwischen Likes und Love auf einem WeChat-Videokonto? Was ist der Nutzen? Mar 26, 2024 pm 12:16 PM

In WeChat-Videokonten sind „Likes“ und „Love“ gängige Interaktionsmöglichkeiten für Benutzer. „Gefällt mir“-Angaben zeigen die Anerkennung und Unterstützung des Benutzers für den Videoinhalt an, den er mag, während Herzen die Liebe und Sorge des Benutzers für den Videoersteller zeigen. Obwohl Likes und Herzen beide die Anerkennung und Liebe des Benutzers für den Videoinhalt ausdrücken, gibt es in ihrem Wesen einige subtile Unterschiede. 1. Was ist der Unterschied zwischen Likes und Love auf einem WeChat-Videokonto? Likes sind oft eine Möglichkeit, allgemeine Zustimmung und Unterstützung auszudrücken, indem Benutzer einfach auf die Schaltfläche „Gefällt mir“ unter einem Video klicken, um ihre Zustimmung zum Video auszudrücken. Dieses einfache und direkte Format ermöglicht es Benutzern, ihre Meinung schnell zu äußern und trägt gleichzeitig zu einer größeren Verbreitung des Videos bei. Liebe ist persönlich und emotional. Im WeChat-Videokonto können Benutzer auf das „

So richten Sie die PPT-Animation so ein, dass sie zuerst aufgerufen und dann beendet wird So richten Sie die PPT-Animation so ein, dass sie zuerst aufgerufen und dann beendet wird Mar 20, 2024 am 09:30 AM

Wir verwenden ppt häufig in unserer täglichen Arbeit. Sind Sie also mit allen Bedienfunktionen in ppt vertraut? Zum Beispiel: Wie werden Animationseffekte in ppt festgelegt, wie werden Umschalteffekte festgelegt und wie lang ist die Effektdauer jeder Animation? Kann jede Folie automatisch abgespielt werden, die PPT-Animation aufrufen und dann verlassen usw. In der heutigen Ausgabe werde ich Ihnen die spezifischen Schritte zum Aufrufen und Verlassen der PPT-Animation mitteilen. Schauen Sie sich diese an. 1. Zuerst öffnen wir ppt auf dem Computer und klicken außerhalb des Textfelds, um das Textfeld auszuwählen (wie im roten Kreis in der Abbildung unten dargestellt). 2. Klicken Sie dann in der Menüleiste auf [Animation] und wählen Sie den Effekt [Löschen] (wie im roten Kreis in der Abbildung dargestellt). 3. Klicken Sie anschließend auf [

Wo kann ich die Kommentare lesen, die Xiaohongshu gefallen hat? Welche Regeln müssen Sie auf der Xiaohongshu-Plattform beachten? Wo kann ich die Kommentare lesen, die Xiaohongshu gefallen hat? Welche Regeln müssen Sie auf der Xiaohongshu-Plattform beachten? Mar 30, 2024 pm 06:51 PM

Im heutigen Zeitalter der Informationsexplosion sind soziale Medien zu einem unverzichtbaren Bestandteil des täglichen Lebens der Menschen geworden. Als führende Lifestyle-Sharing-Plattform in China hat Xiaohongshu eine große Anzahl von Nutzern angezogen, die hier Informationen austauschen und abrufen möchten. Wie sehen wir also Like-Kommentare auf der Xiaohongshu-Plattform? In diesem Artikel wird diese Frage ausführlich beantwortet. 1. Wo kann ich die von Xiaohongshu gelikeden Kommentare lesen? Zuerst müssen wir uns bei unserem Konto auf der Xiaohongshu-Plattform anmelden. Nach dem Einloggen können wir die auf der Startseite empfohlenen Inhalte und die von den Personen, denen wir folgen, geposteten Updates sehen. Unter jedem Beitrag sehen wir Schaltflächen für „Gefällt mir“ und „Kommentieren“. Klicken Sie auf die Schaltfläche „Gefällt mir“, um Ihre Zustimmung zu diesem Inhalt auszudrücken. Klicken Sie auf die Schaltfläche „Kommentar“, um die Kommentare anderer Benutzer zum Inhalt anzuzeigen. 3.Wenn

Was denken Sie über die Kommentare anderer Leute, die Xiaohongshu gefallen haben? Welche Arten von Inhalten erhalten eher Likes und Kommentare? Was denken Sie über die Kommentare anderer Leute, die Xiaohongshu gefallen haben? Welche Arten von Inhalten erhalten eher Likes und Kommentare? Mar 30, 2024 pm 08:06 PM

Im digitalen Zeitalter ist Xiaohongshu zu einer wichtigen Plattform geworden, auf der Menschen ihr Leben teilen und Erfahrungen austauschen können. Benutzer interagieren über Likes und Kommentare und bilden so ein enges soziales Netzwerk. In diesem Artikel erfahren Sie, wie Sie Kommentare anzeigen können, die anderen auf Xiaohongshu gefallen haben, und welche Arten von Inhalten mit größerer Wahrscheinlichkeit „Gefällt mir“-Angaben und Kommentare erhalten. 1. Was denken Sie über die Kommentare anderer Leute, die Xiaohongshu gefallen haben? Benutzer können interagieren, indem sie Kommentare mit „Gefällt mir“-Angaben ansehen, um ihre Unterstützung und Sympathie auszudrücken. Die spezifische Anzeigemethode ist wie folgt: 1. Klicken Sie auf der Xiaohongshu-Homepage auf die Schaltfläche „Entdecken“, um die Seite „Entdecken“ aufzurufen. 2. Klicken Sie auf der Seite „Entdecken“ auf die Schaltfläche „Kreis“, um die Seite „Kreis“ aufzurufen. 3. Durchsuchen Sie auf der Seite „Kreise“ die Themen oder Kreise, die Sie interessieren, und finden Sie Kommentare, die Ihnen gefallen. 4. Klicken Sie auf den Kommentar, um die Likes anzuzeigen

Wie verwende ich die PUT-Anfragemethode in jQuery? Wie verwende ich die PUT-Anfragemethode in jQuery? Feb 28, 2024 pm 03:12 PM

Wie verwende ich die PUT-Anfragemethode in jQuery? In jQuery ähnelt die Methode zum Senden einer PUT-Anfrage dem Senden anderer Arten von Anfragen, Sie müssen jedoch auf einige Details und Parametereinstellungen achten. PUT-Anfragen werden normalerweise zum Aktualisieren von Ressourcen verwendet, beispielsweise zum Aktualisieren von Daten in einer Datenbank oder zum Aktualisieren von Dateien auf dem Server. Das Folgende ist ein spezifisches Codebeispiel, das die PUT-Anforderungsmethode in jQuery verwendet. Stellen Sie zunächst sicher, dass Sie die jQuery-Bibliotheksdatei einschließen. Anschließend können Sie eine PUT-Anfrage senden über: $.ajax({u

Wie entferne ich das Höhenattribut eines Elements mit jQuery? Wie entferne ich das Höhenattribut eines Elements mit jQuery? Feb 28, 2024 am 08:39 AM

Wie entferne ich das Höhenattribut eines Elements mit jQuery? Bei der Front-End-Entwicklung müssen wir häufig die Höhenattribute von Elementen manipulieren. Manchmal müssen wir möglicherweise die Höhe eines Elements dynamisch ändern, und manchmal müssen wir das Höhenattribut eines Elements entfernen. In diesem Artikel wird erläutert, wie Sie mit jQuery das Höhenattribut eines Elements entfernen, und es werden spezifische Codebeispiele bereitgestellt. Bevor wir jQuery zum Betreiben des Höhenattributs verwenden, müssen wir zunächst das Höhenattribut in CSS verstehen. Das Höhenattribut wird verwendet, um die Höhe eines Elements festzulegen

jQuery-Tipps: Ändern Sie schnell den Text aller a-Tags auf der Seite jQuery-Tipps: Ändern Sie schnell den Text aller a-Tags auf der Seite Feb 28, 2024 pm 09:06 PM

Titel: jQuery-Tipps: Ändern Sie schnell den Text aller Tags auf der Seite. In der Webentwicklung müssen wir häufig Elemente auf der Seite ändern und bedienen. Wenn Sie jQuery verwenden, müssen Sie manchmal den Textinhalt aller a-Tags auf der Seite gleichzeitig ändern, was Zeit und Energie sparen kann. Im Folgenden wird erläutert, wie Sie mit jQuery den Text aller Tags auf der Seite schnell ändern können, und es werden spezifische Codebeispiele angegeben. Zuerst müssen wir die jQuery-Bibliotheksdatei einführen und sicherstellen, dass der folgende Code in die Seite eingefügt wird: &lt

Verwenden Sie jQuery, um den Textinhalt aller a-Tags zu ändern Verwenden Sie jQuery, um den Textinhalt aller a-Tags zu ändern Feb 28, 2024 pm 05:42 PM

Titel: Verwenden Sie jQuery, um den Textinhalt aller Tags zu ändern. jQuery ist eine beliebte JavaScript-Bibliothek, die häufig zur Verarbeitung von DOM-Operationen verwendet wird. Bei der Webentwicklung müssen wir häufig den Textinhalt des Link-Tags (eines Tags) auf der Seite ändern. In diesem Artikel wird erläutert, wie Sie mit jQuery dieses Ziel erreichen, und es werden spezifische Codebeispiele bereitgestellt. Zuerst müssen wir die jQuery-Bibliothek in die Seite einführen. Fügen Sie den folgenden Code in die HTML-Datei ein:

See all articles