Maison > Article > interface Web > jQuery obtient un effet flottant en forme de cœur lors d'un clic de souris (avec code)

jQuery obtient un effet flottant en forme de cœur lors d'un clic de souris (avec code)

php中世界最好的语言original: 2018-04-23 11:23:422753parcourir

Cette fois, je vais vous présenter jQuery pour réaliser l'effet flottant en forme de cœur sur les clics de souris (avec code). Quelles sont les précautions pour que jQuery réalise l'effet flottant en forme de cœur sur les clics de souris. Ce qui suit est un cas pratique. Levez-vous et jetez un œil.

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

Est-ce C'est cool ? , collez 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 pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le PHP chinois. site web!

Lecture recommandée :

Explication détaillée de l'analyse globale de l'architecture et de l'utilisation de jquery

Explication détaillée de la méthode de jQuery de juger du type et de la taille des images téléchargées

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!

php 架构 jquery

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：Explication détaillée de l'analyse et de l'utilisation globale de l'architecture jqueryArticle suivant：Explication détaillée de l'analyse et de l'utilisation globale de l'architecture jquery

Articles Liés

Voir plus