suchen

Heim >Web-Frontend >js-Tutorial >So implementieren Sie einen auf die Maus reagierenden Taobao-Animationseffekt in jQuery

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

亚连
亚连Original
2018-06-05 17:42:101572Durchsuche

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>

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So implementieren Sie mit jQuery einen auf die Maus reagierenden Animationseffekt mit TransparenzverlaufNächster Artikel：So implementieren Sie mit jQuery einen auf die Maus reagierenden Animationseffekt mit Transparenzverlauf

In Verbindung stehende Artikel

Mehr sehen