js实现div内拖拽缩放

最新推荐文章于 2024-05-07 11:13:53 发布

原创

最新推荐文章于 2024-05-07 11:13:53 发布 · 642 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #html

本文通过示例代码介绍了如何使用JavaScript配合CSS、HTML实现div元素的拖拽和缩放功能，适合前端开发者参考学习。

没什么知识量我直接放代码你们看着参考

效果预览:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title>js实现div内拖拽缩放</title>
<script src="jquery/1.11.3/jquery.min.js"></script>
<style>
#slider,#slider2 {
	width:100px;
	height:100px;
	cursor:pointer;
	position:absolute;
}
#slider {
	background:#FF7800;
}
#slider img {
	width:100%;
	height:100%;
}
#slider2 {
	background:#0000FF;
}
#box {
	width:960px;
	height:540px;
	border:1px solid #000000;
	position:relative;
	top:10px;
	left:10px;
}
#div1 {
	width:300px;
	height:40px;
	background:#FFA500;
	margin:30px auto;
	position:relative;
}
#div2 {
	width:40px;
	height:40px;
	background:#008000;
	position:absolute;
	left:0;
	top:0;
}
</style>