recherche

Maison  >  Article  >  interface Web  >  jQuery implémente les effets de suspension des clics de souris

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

php中世界最好的语言
php中世界最好的语言original
2018-04-28 14:05:142224parcourir

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>

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!

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 implémente une interface d'impression de polices de texteArticle suivant：JS implémente une interface d'impression de polices de texte

Articles Liés

Voir plus