原生js拖拽实现图形伸缩效果
作者：crazy的蓝色梦想 时间：2024-04-16 08:55:27
本文实例为大家分享了js拖拽实现图形伸缩效果的具体代码，供大家参考，具体内容如下
点击矩形的四个角和四个边实现不同的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding: 0;
margin:0;
}
.div1{
width: 200px;
height: 200px;
background-color: #71e4ff;
position: absolute;
top: 200px;
left: 200px;
}
.t,
.b{
width: 100％;
height: 20px;
background-color:#ffa2d3;
position: absolute;
}
.t{
left: 0;
top:0;
}
.b{
left: 0;
bottom:0;
}
.r,
.l{
width: 20px;
height: 100％;
background-color:#ffa2d3;
position: absolute;
}
.r{
right: 0;
top:0;
}
.l{
left: 0;
top:0;
}
.lt,
.lb,
.rt,
.rb{
width: 20px;
height: 20px;
background-color: #93ff6b;
position: absolute;
}
.lt{
left: 0;
top:0;
}
.rt{
right: 0;
top:0;
}
.lb{
left: 0;
bottom: 0;
}
.rb{
right: 0;
bottom:0;
}
</style>
</head>
<body>
<div class="div1" id="_div1">
<div class="t"></div>
<div class="r"></div>
<div class="b"></div>
<div class="l"></div>
<div class="lt"></div>
<div class="lb"></div>
<div class="rt"></div>
<div class="tb"></div>
</div>
</body>
</html>
<script>
// 获取元素
var _div1 = document.getElementById("_div1");
var divs = _div1.children;
// 遍历每个可以拖拽的元素
for(var i = 0;i < divs.length ;i++)
{
drag(divs[i]);
}
// 封装一个拖拽函数
function drag(obj){
obj.onmousedown = function(event){
// 捕获事件
var event = event || window.event;
// 存储当前的_div1的宽高
var divW = _div1.offsetWidth;
var divH = _div1.offsetHeight;
// 获得当前_div1的offsetLeft 和 offsetTop
var divL = _div1.offsetLeft;
var divT = _div1.offsetTop;
// 存储鼠标按下时的位置
var clientx = event.clientX;
var clienty = event.clientY;
document.onmousemove = function(event){
var event = event || window.event;
if(obj.className.indexOf('t') != -1){
_div1.style.height = divH + ( clienty- event.clientY) + 'px';
_div1.style.top = divT -( clienty- event.clientY)+ 'px';
}
if(obj.className.indexOf('b') != -1){
_div1.style.height = divH + ( event.clientY -clienty ) + 'px';
}
if(obj.className.indexOf('r')!= -1){
_div1.style.width = divW + ( event.clientX - clientx) + 'px';
}
if(obj.className.indexOf('l')!= -1){
_div1.style.width = divW + ( clientx - event.clientX) + 'px';
_div1.style.left = event.clientX + 'px';
}
}
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
}
}
return false;
}
</script>
来源：https://blog.csdn.net/qq_41257129/article/details/88800798
标签：js,拖拽,图形伸缩
0
投稿猜你喜欢
python随机获取列表中某一元素的方法
2023-08-23 18:25:13
Golang算法问题之数组按指定规则排序的方法分析
2023-10-06 01:37:14
Python基于datetime或time模块分别获取当前时间戳的方法实例
2021-01-19 22:53:18
使用Pyhton 分析酒店针孔摄像头
2022-04-16 18:59:24
python 列表元素左右循环移动 的多种解决方案
2023-06-15 06:21:45
如何使用Git优雅的回滚实现
2022-03-17 15:49:15
Python实现钉钉/企业微信自动打卡的示例代码
2022-02-18 21:54:02
Django返回json数据用法示例
2022-05-25 21:00:52
前端来看看 maxthon bugs
2008-09-23 18:35:00
python分块读取大数据,避免内存不足的方法
2022-09-30 13:05:17
Python数据分析:手把手教你用Pandas生成可视化图表的教程
2023-01-29 21:18:50
JavaScript 实现模态对话框 源代码大全
2023-08-22 20:32:24
SQL server使用自定义函数以及游标
2011-11-03 17:26:27
python怎么判断素数
2021-09-30 11:10:33
golang elasticsearch Client的使用详解
2024-05-28 15:24:41
Python异常处理知识点总结
2023-01-04 16:03:36
MySql .frm数据库文件导入的问题
2024-01-18 19:08:09
[关注细节的最佳方案]有效期时间格式的展现
2009-10-30 18:51:00
ORACLE常见错误代码的分析与解决（二）
2024-01-21 16:37:29
python有序查找算法 二分法实例解析
2023-04-15 07:55:36
