2.创建一个盒子,宽高为100px,背景颜色随意。当鼠标移入盒子时,盒子宽高变为250px。当鼠标移出盒子时,盒子宽高变回100px。
时间: 2024-03-16 16:46:47 浏览: 21
好的,以下是代码实现:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子大小变化</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #F44336;
transition: all 0.5s;
}
</style>
</head>
<body>
<div class="box" onmouseover="changeSize(this)" onmouseout="changeSize(this)"></div>
<script>
function changeSize(box) {
if (box.style.width == "100px") {
box.style.width = "250px";
box.style.height = "250px";
} else {
box.style.width = "100px";
box.style.height = "100px";
}
}
</script>
</body>
</html>
```
代码中创建了一个宽高为100px的盒子,并设置其背景颜色。使用 CSS 的 `transition` 属性实现了平滑的动画效果。通过 JavaScript 的 `onmouseover` 和 `onmouseout` 事件监听器实现了鼠标移入移出盒子时触发的函数。函数中判断当前盒子的宽度是否为100px,是则将其宽高改为250px,否则改为100px。