日期:2014-05-16  浏览次数:20544 次

js缩放拖动图片功能,在图片超过2m时的问题
有一个使用js来实现缩放拖动图片的功能,这个功能在图片较小时(500K左右)没有问题,可以正常实现缩放和拖动,并且速度很快。但在遇到图片较大时,比如超过2M时,就会出现如下问题:
 当图片不进行缩放时,进行拖动操作,速度很快,感觉会跟着鼠标移动,但如果进行了缩放操作,无论是放大还是缩小,然后再进行拖动操作,则会有明显的刷屏现象,图片的移动速度很慢,百思不得其解,特来问问大侠们~~

以下是放大和缩小的脚本picObj为图片的公共变量:
function big(){
picObj.width = picObj.width * 1.2;
picObj.height = picObj.height * 1.2;
}

function small(){
picObj.width = picObj.width * 0.8;
picObj.height = picObj.height * 0.8;
}

以下是拖动的脚本winObj是div的公共变量,
function MouseDown(){  
  winObj=document.getElementById("pic_detail_div");
  winObj.setCapture();
  winObj.l=event.x-winObj.style.pixelLeft;
  winObj.t=event.y-winObj.style.pixelTop;
}
function MouseMove(){
  if(winObj!=null && winObj.l != null)
  {
  winObj.style.left = event.x-winObj.l;
  winObj.style.top = event.y-winObj.t;
  }
}
function MouseUp()
{
  if(winObj!=null)
  {
  winObj.releaseCapture();
  winObj=null;
  }
}
以下是div和图片
<div id="pic_detail_div" style="position:absolute;" onMouseMove="MouseMove()" onMouseUp="MouseUp()">
  <img id="pic_detail_img" onMouseDown="MouseDown()" border='0'/></div

------解决方案--------------------
CSS code

超过2M的可以分割成一块一块的小图片,组合起来。一般2M的下载都要老半天,所以分割比较好!