suchen

Heim >Web-Frontend >js-Tutorial >jQuery erzielt einen herzförmigen Floating-Effekt beim Mausklick (mit Code)

jQuery erzielt einen herzförmigen Floating-Effekt beim Mausklick (mit Code)

php中世界最好的语言
php中世界最好的语言Original
2018-04-23 11:23:422837Durchsuche

Dieses Mal bringe ich Ihnen jQuery mit, um den herzförmigen Floating-Effekt bei Mausklicks zu realisieren (mit Code). Was sind die Vorsichtsmaßnahmen für jQuery, um den herzförmigen Floating-Effekt bei Mausklicks zu realisieren? Das Folgende ist ein praktischer Fall. Stehen Sie auf und werfen Sie einen Blick darauf.

Klicken Sie einmal mit der Maus und ein Herz ❤ wird über der Maus angezeigt und verschwindet langsam nach oben, wie unten gezeigt:

Ist nicht Ist es cool? , fügen Sie den Code direkt ein: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
*{
  margin: 0px;
  padding: 0px;
}
</style>
<script type="text/javascript">
$(function(){
  var height=$(window).width();
  $('#test').css({
    'height':height,
  });
  var n=1;
  $('#test').click(function(e){
    if(n%2==0){
      var $i=$('<b></b>').text('你点击了一下');//双数显示这个
    }else{
      var $i=$('<b></b>').text('❤');//单数显示这个
    }
    n++;
    var x=e.pageX,y=e.pageY;//获取鼠标点击的位置坐标
    $i.css({
        "z-index": 9999,
        "top": y - 20,
        "left": x,
        "position": "absolute",
        "color": 'red',
        "font-size": 14,
      });
      $("body").append($i);
      $i.animate({
        "top": y - 180,
        "opacity": 0
      }, 1500, function() {
        $i.remove();
      });//设置动画
  });
});
</script>
</head>
<body>
<p id="test">
</p>
</body>
</html>

Ich glaube, Sie haben die Methode beherrscht, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zum PHP-Chinesen Webseite!

Empfohlene Lektüre:

Detaillierte Erläuterung der Gesamtarchitekturanalyse und Verwendung von jquery

Detaillierte Erläuterung der Methode von jQuery Beurteilung der Art und Größe der hochgeladenen Bilder

Das obige ist der detaillierte Inhalt vonjQuery erzielt einen herzförmigen Floating-Effekt beim Mausklick (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php 架构 jquery
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：Detaillierte Erläuterung der Analyse und Verwendung der gesamten JQuery-ArchitekturNächster Artikel：Detaillierte Erläuterung der Analyse und Verwendung der gesamten JQuery-Architektur

In Verbindung stehende Artikel

Mehr sehen