So lassen Sie ein herzförmiges Muster schweben, wenn Sie mit der Maus darauf klicken-js-Tutorial-php.cn

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

php中世界最好的语言

Freigeben： 2018-06-08 14:10:10

Original

2101 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!