suchen

Heim >Web-Frontend >js-Tutorial >So lassen Sie ein herzförmiges Muster schweben, wenn Sie mit der Maus darauf klicken

So lassen Sie ein herzförmiges Muster schweben, wenn Sie mit der Maus darauf klicken

php中世界最好的语言
php中世界最好的语言Original
2018-06-08 14:10:102149Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie ein herzförmiges Muster schweben lassen, wenn Sie mit der Maus darauf klicken. Welche Vorsichtsmaßnahmen gibt es, um ein herzförmiges Muster schweben zu lassen, wenn Sie mit der Maus darauf klicken? Werfen wir einen Blick darauf.

Das Beispiel in diesem Artikel beschreibt, wie jQuery den coolen Effekt des herzförmigen Schwebens per Mausklick erzielen kann. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

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

Ist es nicht cool? Fügen Sie einfach 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. Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Verwendung von Vue-Komponenten in praktischen Fällen

Winkeldruckseite spezifizierte Funktion

Das obige ist der detaillierte Inhalt vonSo lassen Sie ein herzförmiges Muster schweben, wenn Sie mit der Maus darauf klicken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：JS sorgt dafür, dass Text wörtlich gedruckt wirdNächster Artikel：JS sorgt dafür, dass Text wörtlich gedruckt wird

In Verbindung stehende Artikel

Mehr sehen