Heim >Web-Frontend >js-Tutorial >So implementieren Sie einen auf die Maus reagierenden Taobao-Animationseffekt in jQuery
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?
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!