html鼠标改变大小,鼠标移动可改变DIV的大小

最新推荐文章于 2024-04-19 15:39:51 发布

转载最新推荐文章于 2024-04-19 15:39:51 发布 · 1.5k 阅读

文章标签：

#html鼠标改变大小

本文详细介绍了如何通过JavaScript实现网页中位于页面不同边角的DIV元素，根据鼠标点击并移动来动态调整其宽度或高度。代码示例展示了如何在鼠标按下、移动和释放事件中，实现元素的最小和最大尺寸限制，以及向不同方向拖动时的大小变化效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DIV固定在页面的某个位置，不可拖拽

位于页面左边，鼠标点击且移动，向右移拉大，向左移缩小：

DIV位于页面左边，点击鼠标且左右移动可改变其宽度

.box{

width: 100px;

height:200px;

border:2px solid red;

position: absolute;

top: 10px;

left: 10px;

cursor: e-resize;

}

.sonBox{

width:100%;

height:100%;

cursor: default;

}

var finalWidth = 100; //最后的宽度

var wi = 100; //初始宽度

var dragable = false;//默认不可拖拽

var oldW = '';//记录第一次的鼠标位置

var startDrag = function(event){

dragable = true;

var e=event?event:window.event;

oldW = e.pageX; //记录第一次的鼠标位置

//鼠标松开

document.onmouseup=function(){

if(dragable){

finalWidth = wi;

dragable = false;

};

//鼠标指针移动

document.onmousemove = function(event){

if(dragable){

var e=event?event:window.event;

var box = document.getElementById('box');

wi = e.pageX - oldW + parseInt(finalWidth);

if(wi<100 || wi==100){//div最低宽度

box.style.width = '100px';wi = '100px';

return;

}

if(wi>400 || wi==400){//div最高宽度

box.style.width = '400px';wi = '400px';

return;

}

box.style.width = wi + 'px';

};

位于页面右边，鼠标点击且移动，向右移缩小，向左移拉大：

DIV位于页面右边，点击鼠标且左右移动可改变其宽度

.box{

width: 100px;

height:200px;

border:2px solid red;

position: absolute;

top: 10px;

right: 10px;

cursor: e-resize;

}

.sonBox{

width:100%;

height:100%;

cursor: default;

}

var finalWidth = 100; //最后的宽度

var wi = 100; //初始宽度

var dragable = false;//默认不可拖拽

var oldW = '';//记录第一次的鼠标位置

var startDrag = function(event){

dragable = true;

var e=event?event:window.event;

oldW = e.pageX; //记录第一次的鼠标位置

//鼠标松开

document.onmouseup=function(){

if(dragable){

finalWidth = wi;

dragable = false;

};

//鼠标指针移动

document.onmousemove = function(event){

if(dragable){

var e=event?event:window.event;

var box = document.getElementById('box');

wi = oldW - e.pageX + parseInt(finalWidth);

if(wi<100 || wi==100){//div最低宽度

box.style.width = '100px';wi = '100px';

return;

}

if(wi>400 || wi==400){//div最高宽度

box.style.width = '400px';wi = '400px';

return;

}

box.style.width = wi + 'px';

};

位于页面上边，鼠标点击且移动，向上移缩小，向下移拉大：

DIV位于页面上边，点击鼠标且上下移动可改变其高度

.box{

width: 200px;

height:100px;

border:2px solid red;

position: absolute;

top: 10px;

left: 10px;

cursor: s-resize;

}

.sonBox{

width:100%;

height:100%;

cursor: default;

}

var finalHeight = 100; //最后的高度

var he = 100; //初始高度

var dragable = false;//默认不可拖拽

var oldW = '';//记录第一次的鼠标位置

var startDrag = function(event){

dragable = true;

var e=event?event:window.event;

oldW = e.pageY; //记录第一次的鼠标位置

document.onmouseup = function(){

if(dragable){

finalHeight = he;

dragable = false;

};

document.onmousemove = function(event){

if(dragable){

var e=event?event:window.event;

var box = document.getElementById('box');

he = e.pageY - oldW + parseInt(finalHeight);

if(he<100 || he==100){//div最低高度

box.style.height = '100px';he = '100px';

return;

}

if(he>400 || he==400){//div最高高度

box.style.height = '400px';he = '400px';

return;

}

box.style.height = he + 'px';

};

位于页面下边，鼠标点击且移动，向上移拉大，向下移缩小：

DIV位于页面下边，点击鼠标且上下移动可改变其高度

.box{

width: 200px;

height:100px;

border:2px solid red;

position: absolute;

bottom: 10px;

left: 10px;

cursor: s-resize;

}

.sonBox{

width:100%;

height:100%;

cursor: default;

}

var finalHeight = 100; //最后的高度

var he = 100; //初始高度

var dragable = false;//默认不可拖拽

var oldW = '';//记录第一次的鼠标位置

var startDrag = function(event){

dragable = true;

var e=event?event:window.event;

oldW = e.pageY; //记录第一次的鼠标位置

document.onmouseup = function(){

if(dragable){

finalHeight = he;

dragable = false;

};

document.onmousemove = function(event){

if(dragable){

var e=event?event:window.event;

var box = document.getElementById('box');

he = oldW - e.pageY + parseInt(finalHeight);

if(he<100 || he==100){//div最低高度

box.style.height = '100px';he = '100px';

return;

}

if(he>400 || he==400){//div最高高度

box.style.height = '400px';he = '400px';

return;

}

box.style.height = he + 'px';

};