(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

moveLayer("alphaLayer",startX,startY);

}else if(startXwindow.event.clientY){

moveLayer("alphaLayer",startX,window.event.clientY);

}else if(startX>window.event.clientX&&startY

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;

}

總結

以上是生活随笔為你收集整理的java 窗口扩大,JavaScript实现拉框放大的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。