原生js拖拽实现图形伸缩效果
更新时间：2020年02月10日 18:10:26 作者：crazy的蓝色梦想
这篇文章主要为大家详细介绍了原生js拖拽实现图形的伸缩效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
JavaScript必知必会(六) delete in instanceof
这篇文章主要介绍了JavaScript必知必会(六) delete in instanceof的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下2016-06-06
javascript 面向对象继承，需要的朋友可以参考下。2009-11-11
这篇文章主要介绍了如何用RxJS实现Redux Form，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
在 JavaScript 中,本地存储指的是将数据保存在用户的浏览器中,能够在页面刷新或关闭后仍然保留,本文给大家介绍了本地存储的几种方式,每种存储方式的特点、区别及应用场景,需要的朋友可以参考下2024-12-12
这篇文章主要为大家介绍了JavaScript实现动态表格的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-01-01
JavaScript创建一个object对象并操作对象属性的用法
这篇文章主要介绍了JavaScript创建一个object对象并操作对象属性的用法,实例分析了javascript使用object类定义对象及属性的用法,需要的朋友可以参考下2015-03-03
这篇文章主要给大家介绍了关于threejs后期处理的基本使用方法之加特效的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-01-01
这篇文章主要介绍了深入理解javascript的getTime()方法,需要的朋友可以参考下2017-02-02
本文详细介绍了JavaScript数组reduce()方法的使用,包括核心语法、常见案例以及常见错误,通过实际案例和代码分析,帮助读者彻底掌握reduce方法,同时,还提供了reduce的polyfill实现,以深入理解其工作原理,需要的朋友可以参考下2025-02-02
在本文中，我将解释如何使用 setTimeout()，包括如何使用它来制作一个睡眠函数，使JavaScript暂停执行并在连续的代码行之间等待。2021-04-04
最新评论