Kevin的技術家園

(1)相應鼠標的onMouseDown,onMouseMove,onMouseUp三個事件，分別對應handleMouseDown，handleMouseMove，handleMouseUp三個函數。
(2)在onMouseDown中設置狀態值，保存開始點坐標：
function handleMouseDown() {
?switch(m_tool) {
? case "zoomin": // zoom in mode
?? startX=window.event.clientX;
?? startY=window.event.clientY;
?? zooming=true;
?? break;
?}
?//記得一定要返回事件的狀態
?window.event.returnValue=false
}
(3)在onMouseMove中劃框
function handleMouseMove(){
?switch(m_tool) {
? case "zoomin": // zoom in mode
?? if(zooming==true&&(Math.abs(event.clientX-startX)>drawStockWidth&&Math.abs(event.clientY-startY)>drawStockWidth)){
???????? ZoomBox()
????? }
?? break;
? case "zoomout": // zoom out mode
???? parent.postFrame.requestMapForm.action="requestMap.do?tool=zoomout";
?? parent.postFrame.requestMapForm.submit();
?? break;
?}
?window.event.returnValue=false
}
(4)在onMouseUp中取消畫框狀態
function handleMouseUp(){
?switch(m_tool) {
? case "zoomin": // zoom in mode
?? setDownLoadState("");
?? parent.postFrame.requestMapForm.action="requestMap.do?tool=zoomin";
?? parent.postFrame.requestMapForm.submit();
?? stopZoomBox();
?? break;
? case "zoomout": // zoom out mode
?? setDownLoadState("");
?? parent.postFrame.requestMapForm.action="requestMap.do?tool=zoomout";
?? parent.postFrame.requestMapForm.submit();
?? break;
?}
?window.event.returnValue=false
}

畫框函數
//draw the zoom box
function ZoomBox() {
??? var newx;
??? var newy;
??? if(startX<window.event.clientX&&startY<window.event.clientY){
???? moveLayer("alphaLayer",startX,startY);
??? }else if(startX<window.event.clientX&&startY>window.event.clientY){
???? moveLayer("alphaLayer",startX,window.event.clientY);
??? }else if(startX>window.event.clientX&&startY<window.event.clientY){
???? moveLayer("alphaLayer",window.event.clientX,startY);
??? }else if(startX>window.event.clientX&&startY>window.event.clientY){
???? moveLayer("alphaLayer",window.event.clientX,window.event.clientY);
??? }
??? setLayerExtent("alphaLayer",Math.abs(window.event.clientX-startX),Math.abs(window.event.clientY-startY))
??? showLayer("alphaLayer");
}
function stopZoomBox(){
?hideLayer("alphaLayer");
?zooming=false;
}