javascript 左上角拖拽 放大缩小层的例子
<!DOCTYPE html><html><head> <title></title> <style> #drap_div{ width: 200px; height: 200px; position: absolute; right:10px; bottom: 10px; background: #eeeeee; border: 2px #dddddd solid; } #drap_tool{ position: absolute; top:0px; left: 0px; background: #cccccc; width: 10px; height: 10px; cursor:nw-resize; } </style> <script> function init(){ var drop=false; var drapToolObj=document.getElementById("drap_tool"); var drapDivObj=document.getElementById("drap_div"); var windowWidth=document.body.clientWidth; var windowHeight=document.body.clientHeight; var drapObjRight; var drapObjBottom; drapToolObj.onmousedown=function(){ drop=true; drapObjRight=windowWidth-drapDivObj.offsetLeft- drapDivObj.offsetWidth; drapObjBottom=windowHeight-drapDivObj.offsetTop- drapDivObj.offsetHeight; }; drapToolObj.onmouseup=function(){ drop=false; }; document.onmouseup=function(){ drop=false; }; document.onmousemove=function(e){ var e=e?e:window.event; //IE下事件E不存在，为window.event事件 if(drop){ if(windowWidth-e.clientX-drapObjRight>10 && windowHeight-e.clientY-drapObjBottom>10){ drapDivObj.style.width= windowWidth-e.clientX-drapObjRight+"px"; drapDivObj.style.height= windowHeight-e.clientY-drapObjBottom+"px"; } } } } </script></head><body onload="init()"> <div id="drap_div"> <div id="drap_tool"></div> </div></body></html>?