html事件改变矩形大小代码示例.pdf
需积分: 0 40 浏览量
2023-05-19
17:20:07
上传
评论
收藏 60KB PDF 举报
要使用 HTML 和 JavaScript 来实现改变矩形大小的事件，你可以借助 CSS
和 JavaScript 的交互作用。以下是一个简单的示例：
<!DOCTYPE html>
<html>
<head>
<style>
#rectangle {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="rectangle"></div>
<script>
// 获取矩形元素
var rectangle = document.getElementById("rectangle");
// 添加鼠标按下事件
rectangle.addEventListener("mousedown", function(e) {
// 记录鼠标按下时的初始位置
var startX = e.clientX;
var startY = e.clientY;
// 添加鼠标移动事件
document.addEventListener("mousemove", resizeRectangle);
// 添加鼠标松开事件
document.addEventListener("mouseup", stopResize);
// 阻止默认事件，避免选中文本等操作
e.preventDefault();
资源评论
