posts - 119, comments - 62, trackbacks - 0, articles - 0

JavaScript实现拉框放大

Posted on 2006-04-05 15:59 Kevin Meng 阅读(573) 评论(0)  编辑  收藏

(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;
}


只有注册用户登录后才能发表评论。


网站导航: