Maison > Article > interface Web > Comment faire flotter un motif en forme de cœur lorsque vous cliquez avec la souris

Comment faire flotter un motif en forme de cœur lorsque vous cliquez avec la souris

php中世界最好的语言original: 2018-06-08 14:10:102078parcourir

Cette fois, je vais vous montrer comment faire flotter un motif en forme de cœur lorsque vous cliquez avec la souris. Quelles sont les précautions à prendre pour faire flotter un motif en forme de cœur lorsque vous cliquez avec la souris. Voici un cas pratique, jetons un coup d'oeil.

L'exemple de cet article décrit comment jQuery peut obtenir l'effet sympa d'un flottement en forme de cœur lors d'un clic de souris. Partagez-le avec tout le monde pour référence, les détails sont les suivants :

Cliquez une fois sur la souris, un cœur ❤ s'affichera au-dessus de la souris et il disparaîtra lentement vers le haut, comme indiqué ci-dessous :

N'est-ce pas très cool ? Il suffit de coller le code directement :

<!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>

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour en savoir plus. informations passionnantes, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Utilisation des composants vue dans des cas pratiques

Fonction spécifiée de page d'impression angulaire

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：JS imprime le texte textuellementArticle suivant：JS imprime le texte textuellement

Articles Liés

Voir plus