<!DOCTYPE html>
<html lang="zh-Cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
font-family: "Microsoft YaHei", serif;
}
body, dl, dd, p, h1, h2, h3, h4, h5, h6 {
margin: 0;
}
ol, ul, li {
margin: 0;
padding: 0;
list-style: none;
}
img {
border: none
}
#wrap p{
float: left;
margin-left: 10px;
width: 150px;
height: 40px;
background-color: #cc3366;
}
</style>
</head>
<body>
<div id="wrap">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
// 清空之前的所有动画
// 这个操作是为了让一直滑动滑块的用户消停点 他划过离开就直接缩回去
// 如果你需要的是在清空的时候动画瞬间到末尾 填true,true参数
// 否则不需要参数
$(function () {
$p = $("#wrap p");
$p.hover(
function () {
$(this).stop().animate({
height:200
},500)
},
function () {
$(this).stop().animate({
height: 45
},500)
})
})
</script>
</body>
</html>
Python3Turtle