// 对阴影区域设置时间 点击到阴影区时 裁剪区域消失 阴影区消失 for (var i = 0; i < oShadow.length; i++) { oShadow[i].index = i; oShadow[i].onmousedown = function() { oTailor.style.display = 'none'; oTailor.style.width = '0px'; oTailor.style.hegiht = '0px'; for (var i = 0; i < oShadow.length; i++) { oShadow[i].style.display = 'none'; oShadow[i].style.left = '0px'; oShadow[i].style.top = '0px'; } } }
监视鼠标移动位置
接下来添加裁剪区域拉伸的功能，当鼠标移动到边沿的点状边框时呈现不同的效果
添加鼠标显示效果
// 点状边框监视 设置相应操作 oTailor.onmousemove = function(ev) { var oTarget = oEvent.target; switch(oTarget.id) { case 'box_1': // 左上 setAssign(oTailor , 'cursor' , 'nw-resize'); break; case 'box_2': // 右上 setAssign(oTailor , 'cursor' , 'ne-resize'); break; case 'box_3': // 左下 setAssign(oTailor , 'cursor' , 'sw-resize'); break; case 'box_4': // 右下 setAssign(oTailor , 'cursor' , 'se-resize'); break; case 'box_5': // 上 setAssign(oTailor , 'cursor' , 'n-resize'); break; case 'box_6': // 左 setAssign(oTailor , 'cursor' , 'w-resize'); break; case 'box_7': // 下 setAssign(oTailor , 'cursor' , 's-resize'); break; case 'box_8': // 右 setAssign(oTailor , 'cursor' , 'e-resize'); break; default : // 裁剪区域 显示可移动提示 setAssign(oTailor , 'cursor' , 'move'); break; } }
由于监视的div较多，因此采用事件委托的方式添加，效果不方便演示，有兴趣的同学可以自己测试，
添加拉伸效果
代码
// 裁剪区域的移动事件 oTailor.onmousedown = function(ev) { // event事件对象 var oEvent = ev || window.event; // 获取cursor状态 var oCur = getCss(oTailor , 'cursor'); // 鼠标初始位置 var sTmpX = oEvent.clientX; var sTmpY = oEvent.clientY; // 获取裁剪区域的属性 用一个对象保存起来方便调用 oAttrs.left = getCss(oTailor , 'left'); oAttrs.top = getCss(oTailor , 'top'); oAttrs.width = getCss(oTailor , 'width'); oAttrs.height = getCss(oTailor , 'height'); document.onmousemove = function(ev) { // 移动事件对象 var oEvent = ev || window.event; // 当前鼠标位置减去初始鼠标位置 等于 鼠标移动距离 var sLeftT = oEvent.clientX - sTmpX; var sTopT = oEvent.clientY - sTmpY ; // 表示鼠标移动的距离 var oTmpHeight = ''; var oTmpTop = ''; var oTmpWidth = ''; var oTmpLeft = ''; switch(oCur) { case 'nw-resize' : // 左上 oTmpWidth = parseInt(oAttrs.width) - sLeftT ; oTmpHeight = parseInt(oAttrs.height) - sTopT ; oTmpLeft = parseInt(oAttrs.left) + sLeftT ; oTmpTop = parseInt(oAttrs.top) + sTopT ; break; case 'ne-resize' : // 右上 // 此时width不能减去鼠标移动距离 因为此时移动距离为正值 oTmpWidth = parseInt(oAttrs.width) + sLeftT ; oTmpHeight = parseInt(oAttrs.height) - sTopT ; // 右上角移动不需要left值 因为默认响右移动 oTmpTop = parseInt(oAttrs.top) + sTopT ; break; case 'sw-resize' : // 左下 // 同右上 height 必须是加上鼠标移动距离 oTmpWidth = parseInt(oAttrs.width) - sLeftT ; oTmpHeight = parseInt(oAttrs.height) + sTopT ; oTmpLeft = parseInt(oAttrs.left) + sLeftT ; break; case 'se-resize' : // 右下 // 左下与右上的结合 同时去除left与top oTmpWidth = parseInt(oAttrs.width) + sLeftT ; oTmpHeight = parseInt(oAttrs.height) + sTopT ; break; case 'n-resize' : // 上 oTmpHeight = parseInt(oAttrs.height) - sTopT; oTmpTop = parseInt(oAttrs.top) + sTopT; break; case 'w-resize' : // 左 oTmpWidth = parseInt(oAttrs.width) - sLeftT ; oTmpLeft = parseInt(oAttrs.left) + sLeftT; break; case 's-resize' : // 下 oTmpHeight = parseInt(oAttrs.height) + sTopT; break; case 'e-resize' : // 右 var oTmpWidth = parseInt(oAttrs.width) + sLeftT; break; default : // 否则是移动裁剪区域 tailorMove(oEvent , oTailor , oPicture , oShadow); break; } // 向上拉到边界 if(parseInt(getCss(oTailor , 'top')) <= oPicture.offsetTop) { oTmpHeight = parseInt(getCss(oPicture,'height')) - (oPicture.offsetTop+parseInt(getCss(oPicture,'height'))-parseInt(getCss(oTailor,'top'))-parseInt(getCss(oTailor,'height'))); oTmpTop = oPicture.offsetTop; }else if(oPicture.offsetTop+parseInt(getCss(oPicture,'height')) <= (parseInt(getCss(oTailor,'top'))+parseInt(getCss(oTailor,'height')))){ // 向下拉到边界 oTmpHeight = oPicture.offsetTop+parseInt(getCss(oPicture,'height')) - parseInt(getCss(oTailor,'top')); } // 向左拉到边界 if((parseInt(getCss(oTailor , 'left'))) <= oPicture.offsetLeft) { oTmpWidth = parseInt(getCss(oPicture,'width')) - (oPicture.offsetLeft+parseInt(getCss(oPicture),'width')-parseInt(getCss(oTailor,'left'))-parseInt(getCss(oTailor,'width'))) oTmpLeft = oPicture.offsetLeft; } else if(parseInt(getCss(oTailor , 'width')) + parseInt(getCss(oTailor,'left')) >= (oPicture.offsetLeft+oPicture.offsetWidth)) { // 向右拉到边界 oTmpWidth = oPicture.offsetLeft+oPicture.offsetWidth - parseInt(getCss(oTailor,'left')); } // 赋值 if(oTmpWidth){ setAssign(oTailor , 'width' , oTmpWidth + 'px'); } if(oTmpHeight) { setAssign(oTailor , 'height' , oTmpHeight + 'px'); } if (oTmpLeft) { setAssign(oTailor , 'left' , oTmpLeft + 'px'); } if (oTmpTop) { setAssign(oTailor , 'top' , oTmpTop + 'px'); } // 阴影区域绘制 shadow(oPicture , oTailor , oShadow); // 添加裁剪边框 tailorBorder(oDiv , oHandle , oTailor); }; // 当松开鼠标时注意取消移动事件 document.onmouseup = function(ev) { // event事件对象 var oEvent = ev || window.event; document.onmousemove = null; oEvent.preventDefault(); } oEvent.preventDefault(); };