suchen

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

WBOY
WBOYOriginal
2016-05-16 15:22:321213Durchsuche

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>

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

Stellungnahme：
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
Vorheriger Artikel：Animationseffekt von „Gefällt mir“-Bildern 1, implementiert von jQuery (mit Online-Demonstration und Demo-Quellcode-Download)_jqueryNächster Artikel：Animationseffekt von „Gefällt mir“-Bildern 1, implementiert von jQuery (mit Online-Demonstration und Demo-Quellcode-Download)_jquery

In Verbindung stehende Artikel

Mehr sehen