1、问题1：在div的边框时改变鼠标的样式问题2：如何改变div的高度问题3：div设置最大最小值--------------------------------------------------------------------问题1：在div的边框时改变鼠标的样式解决：用大div包着一个小的div，小的div长宽100%，大的div有边框。大的div hover 样式为 cursor: s-resize;小的div hover 样式为cursor: default;（全部代码在文末，记得投票）HTML 代码如下：CSS代码如下： <style type="text/css"> .outer{ width: 100px; height:200px; border:2px solid red; } .inner{ width:100%; height:100%; /*border:1px solid #000;*/ } .outer:hover{ cursor: s-resize; } .inner:hover{ cursor: default; } </style>
2、问题2：如何改变div的高度解决思路：在大div border鼠标down时开启拖动，document监测鼠标move，鼠标位移量 + 最后div大小 = div的大小document监测鼠标up时，拖拽结束，保存div的最后高度。问题3：div设置最大最小值解决：当 鼠标位移量 + 最后div大小 在某个范围以外，则不改变div的大小。JS代码如下：<script type="text/javascript"> var finalheight = 200; //最后的高度 var he = 200; //初始高度 var dragable = false;//默认不可拖拽 var oldY = '';//记录第一次的鼠标位置 var startDrag = function(event){ dragable = true; var e=event?event:window.event; oldY = e.pageY; //记录第一次的鼠标位置 }; var unDrop = function(){ dragable = false; window.event? window.event.cancelBubble = true : e.stopPropagation(); }; var endDrop = function(){ if(dragable){ finalheight = he; dragable = false; }; }; document.onmouseup=function(){ endDrop(); }; document.onmousemove=function(event){ if(dragable){ var e=event?event:window.event; box = document.getElementById('moveBarBox'); console.log(box); he = e.pageY - oldY + parseInt(finalheight); //鼠标的位移 + div的最后高度 = div的新高度 //向上拉 he = oldY - e.pageY + parseInt(finalheight); //向下拉 he = e.pageY - oldY + parseInt(finalheight); if(dragable){ //div设置最大最小值 if(he<120 || he==120){//div最低高度 box.style.height = '120px';he= '120px'; return; } if(he>400 || he==400){//div最高高度 box.style.height = '400px';he= '400px';return; } box.style.height = he + 'px'; }; }; };</script>
3、问题4：div四个方向四个鼠标样式（我没做，需要的话留言我可以帮你做一下）四个方向的话，不能加border了，只能在上下左右各加一个div，在div:hover时候的样式不变。
4、全部代码拿去试一试：有问题留言问。帮助到你，记得投票或者留言，需要鼓励。<!-- 思路以及代码以下—— 陈 --><!DOCTYPE html><html><head> <title></title> <style type="text/css"> .outer{ width: 100px; height:200px; border:2px solid red; } .inner{ width:100%; height:100%; /*border:1px solid #000;*/ } .outer:hover{ cursor: s-resize; } .inner:hover{ cursor: default; } </style></head><body><div id="moveBarBox" class="outer" onmousedown="startDrag()"> <div class="inner" > </div></div><script type="text/javascript"> var finalheight = 200; //最后的高度 var he = 200; //初始高度 var dragable = false;//默认不可拖拽 var oldY = '';//记录第一次的鼠标位置 var startDrag = function(event){ dragable = true; var e=event?event:window.event; oldY = e.pageY; //记录第一次的鼠标位置 }; var unDrop = function(){ dragable = false; window.event? window.event.cancelBubble = true : e.stopPropagation(); }; var endDrop = function(){ if(dragable){ finalheight = he; dragable = false; }; }; document.onmouseup=function(){ endDrop(); }; document.onmousemove=function(event){ if(dragable){ var e=event?event:window.event; box = document.getElementById('moveBarBox'); console.log(box); he = e.pageY - oldY + parseInt(finalheight); //鼠标的位移 + div的最后高度 = div的新高度 //向上拉 he = oldY - e.pageY + parseInt(finalheight); //向下拉 he = e.pageY - oldY + parseInt(finalheight); if(dragable){ if(he<120 || he==120){//div最低高度 box.style.height = '120px';he= '120px'; return; } if(he>400 || he==400){//div最高高度 box.style.height = '400px';he= '400px';return; } box.style.height = he + 'px'; }; }; };</script>
