jQuery implementiert Mausklick-Aussetzungseffekte-js-Tutorial-php.cn

jQuery implementiert Mausklick-Aussetzungseffekte

php中世界最好的语言

Freigeben： 2018-04-28 14:05:14

Original

2255 Leute haben es durchsucht

Dieses Mal werde ich Ihnen jQuery vorstellen, um den Mausklick-Hover-Effekt zu implementieren. Was sind die Vorsichtsmaßnahmen für jQuery, um den Mausklick-Hover-Effekt zu implementieren?

Klicken Sie einmal mit der Maus und ein Herz ❤ wird über der Maus angezeigt und verschwindet langsam nach oben, wie unten gezeigt:

Ist nicht Ist es cool? , fügen Sie den Code direkt ein:

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

Nach dem Login kopieren

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung von mapState und mapGetters in vuex

Detaillierte Erläuterung der Schritte dazu Verwenden Sie vuex (mit Code)

Das obige ist der detaillierte Inhalt vonjQuery implementiert Mausklick-Aussetzungseffekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!