Maison > Article > interface Web > Comment implémenter l'effet d'animation Taobao réactif à la souris dans jQuery
Cet article présente principalement l'implémentation par jQuery des effets d'animation Taobao réactifs à la souris, impliquant une réponse aux événements jQuery et un fonctionnement dynamique des attributs des éléments de page. Les amis dans le besoin peuvent s'y référer
Cet article décrit l'implémentation de jQuery avec des exemples. . Effet d'animation Taobao réactif à la souris. Partagez-la avec tout le monde pour votre référence, les détails sont les suivants :
<!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>Cette animation peut obtenir l'effet visuel du dégradé volant vers le haut lorsque la souris glisse dessus.
J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.
Articles connexes :
Comment obtenir les informations textuelles de l'élément actuel à partir de vue.js
À propos de la liaison vue element-ui Quelles sont les solutions à l’événement @keyup invalide ?
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!