Heim > Artikel > Web-Frontend > Implementierung mausresponsiver Taobao-Animationseffekte

Implementierung mausresponsiver Taobao-Animationseffekte

php中世界最好的语言Original: 2018-03-14 17:19:241294Durchsuche

Dieses Mal werde ich Ihnen die Implementierung des auf die Maus reagierenden Taobao-Animationseffekts vorstellen. Was sind die Vorsichtsmaßnahmen für die Erstellung des auf die Maus reagierenden Taobao-Animationseffekts?

<!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 erzielen, dass der Farbverlauf nach oben fliegt, wenn die Maus darüber gleitet.

Ich glaube, dass Sie die Methode beherrschen, 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:

So fügen Sie Li-Tags und -Attribute mit jQuery hinzu

So erhalten Sie den Wert von Tag Sub -Elemente mit jQuery

Das obige ist der detaillierte Inhalt vonImplementierung mausresponsiver Taobao-Animationseffekte. 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：Implementierung eines auf die Maus reagierenden TransparenzverlaufseffektsNächster Artikel：Implementierung eines auf die Maus reagierenden Transparenzverlaufseffekts

In Verbindung stehende Artikel

Mehr sehen