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

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.οnmοuseup=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';

};

};

};

6fe0334cc0c1f664f50e7f1a48d80711.png

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

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.οnmοuseup=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';

};

};

};

c34c47191eaac9e17f9df3b1ec715ed0.png

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

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';

};

};

};

4fe1e0720bdf1e3af4ea59240cf4e9f8.png

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

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';

};

};

};

b434c0fb261a7ef400b36e6143148dc7.png

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过监听鼠标移动事件来实现改变div移动。具体方式如下: 1. 获取待移动div元素,并设置其初始位置。 2. 监听鼠标移动事件,获取鼠标相对于文档的坐标,计算出待移动div元素应该移动到的位置。 3. 使用CSS3的transform属性来改变div元素的位置,实现平滑的移动效果。 下面是一个简单的实现示例: ```html <!DOCTYPE html> <html> <head> <title>Move Div with Mouse</title> <style> #moveDiv { position: absolute; top: 100px; left: 100px; width: 100px; height: 100px; background-color: red; transition: transform 0.2s ease-out; } </style> </head> <body> <div id="moveDiv"></div> <script> var moveDiv = document.getElementById('moveDiv'); var startX, startY, offsetX, offsetY; moveDiv.addEventListener('mousedown', function(event) { startX = event.pageX; startY = event.pageY; offsetX = moveDiv.offsetLeft; offsetY = moveDiv.offsetTop; document.addEventListener('mousemove', moveHandler); }); document.addEventListener('mouseup', function(event) { document.removeEventListener('mousemove', moveHandler); }); function moveHandler(event) { var moveX = event.pageX - startX; var moveY = event.pageY - startY; moveDiv.style.transform = 'translate(' + (offsetX + moveX) + 'px, ' + (offsetY + moveY) + 'px)'; } </script> </body> </html> ``` 这个示例,我们监听了moveDiv元素的mousedown事件,并在事件处理函数记录了鼠标点击时的坐标和div元素的初始位置。然后,我们在document上监听了mousemove和mouseup事件,分别在mousemove事件处理函数计算出鼠标相对于初始位置的偏移量,并使用translate()函数来改变div元素的位置。mouseup事件处理函数用于取消mousemove事件的监听。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值