jQuery obtient un effet flottant en forme de cœur lors d'un clic de souris (avec code)-js tutoriel-php.cn

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

php中世界最好的语言

Libérer： 2018-04-23 11:23:42

original

2797 Les gens l'ont consulté

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>

Copier après la connexion

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!