jQuery implémente les effets de suspension des clics de souris-js tutoriel-php.cn

jQuery implémente les effets de suspension des clics de souris

php中世界最好的语言

Libérer： 2018-04-28 14:05:14

original

2265 Les gens l'ont consulté

Cette fois, je vais vous présenter jQuery pour implémenter l'effet de survol du clic de souris. Quelles sont les précautions pour que jQuery implémente l'effet de survol du clic de souris. Ce qui suit est un cas pratique, jetons un coup d'œ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'utilisation de mapState et mapGetters dans vuex

Explication détaillée des étapes pour utiliser vuex (avec code)

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!