- 技术博客
- jQuery实例——图标特效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图标特效
</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
width: 400px;
height: 300px;
border: 1px solid #000;
margin: 50px auto;
}
ul > li {
list-style: none;
float: left;
width: 100px;
height: 80px;
text-align: center;
margin-top: 50px;
overflow: hidden;
}
ul > li > span {
position: relative;
}
img {
width: 30px;
height: 30px;
}
</style>
<script src="./js/jquery-3.5.1.js"></script>
<script>
$(function () {
$("li").mouseenter(function () {
$(this).children("span").animate({
top: -50
}, 2000, function () {
$(this).css("top", "50px")
$(this).animate({
top: 0
}, 2000)
})
})
})
</script>
</head>
<body>
<ul>
<li><span><img src="images/icon1.png" alt=""></span>
<p>图标1
</p></li>
<li><span><img src="images/icon2.png" alt=""></span>
<p>图标2
</p></li>
<li><span><img src="images/icon3.png" alt=""></span>
<p>图标3
</p></li>
<li><span><img src="images/icon4.png" alt=""></span>
<p>图标4
</p></li>
</ul>
</body>
</html>
