<html>
<head>
<title>
jquery示例
</title>
<style>
.center {
margin: auto;
width: 50%;
border: 3px solid #73AD21;
padding: 6px;
transition: height 0.5s ease-out;
}
.bt {
margin: auto;
width: 30%;
border: 3px solid #73AD21;
padding: 6px;
background-color: #73AD21;
font-size: 30px;
color: aliceblue;
}
</style>
<script type="text/javascript" src="/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".center").mouseenter(function() {
$(this).animate({
height: "500px" // 鼠标进入时，改变div的高度为200px（展开）
}, 500);
}).mouseleave(function() {
$(this).animate({
height: "50px" // 鼠标离开时，改变div的高度为50px（收起）
}, 500);
});
});
</script>
</head>
<body>
<div class="center">
<h1>有一种安全感，叫成都温度</h1> <br>
湃客：微成都 2022-02-24 14:05<br>
<p>近日<br>
疫情再次对成都进行了考验<br>
二月的寒风中<br>
<strong>医务人员</strong>、
<em>志愿者</em>、社区工作者<br>
再次集结<br>
小到一间教室，大到整座城市<br>
每个角落都有默默守护我们的英雄<br>
</p>
</div>
<center>
<button class="bt">隐藏上面内容</button>
</center>
</body>
</html>
155
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
