So implementieren Sie einen auf die Maus reagierenden Taobao-Animationseffekt in jQuery-js-Tutorial-php.cn

So implementieren Sie einen auf die Maus reagierenden Taobao-Animationseffekt in jQuery

亚连

Freigeben： 2018-06-05 17:42:10

Original

1499 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die jQuery-Implementierung von auf die Maus reagierenden Taobao-Animationseffekten vorgestellt, einschließlich der jQuery-Ereignisreaktion und der dynamischen Bedienung von Seitenelementattributen.

Dieser Artikel beschreibt die jQuery-Implementierung anhand von Beispielen . Auf die Maus reagierender Taobao-Animationseffekt. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Jquery淘宝动画</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
<style>
* {
 margin: 0;
 padding: 0;
 font-family:"微软雅黑"
}
#box{
 padding-left:20px;
 background-color:#f9f9f9;
 border:1px solid #ccc;
 width:236px;
 height:250px;
 margin:0 auto;
}
#box a{
 width:50px;
 height:60px;
 border:1px solid #ccc;
 float:left;
 margin:10px 10px;
 background-color:#FFFFFF;
 text-align:center;
 font-size:14px;
 position:relative;
}
#box a i{
 position:absolute;
 top:15px;
 left:18px;
}
#box a p{
 position:absolute;
 top:36px;
 left:5px;
}
#box a{
 cursor:pointer;
}
</style>
</head>
<body>
<p id="box">
<a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a>
<a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a>
<a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a>
<a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a>
<a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a>
<a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a>
<a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a>
<a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a>
<a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a>
</p>
<script>
$(function(){
  $("#box a").mouseenter(function(){
    $(this).find("i").animate({top:"-15px",opacity:"0"},300, function(){
      $(this).css({top:"25px"});
      $(this).animate({top:"15px",opacity:"1"},200)
    })
  })
});
</script>
</body>
</html>

Nach dem Login kopieren

Diese Animation kann den visuellen Effekt eines nach oben fliegenden Farbverlaufs erzielen, wenn die Maus darüber gleitet.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So erhalten Sie die Textinformationen des aktuellen Elements von vue.js

Informationen zur Vue-Element-UI-Bindung Welche Lösungen gibt es für das ungültige @keyup-Ereignis?

Verwenden Sie jquery, um auf die Eingabetaste zu klicken, um den Anmeldeeffekt zu erzielen (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie einen auf die Maus reagierenden Taobao-Animationseffekt in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!