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的下载都要老半天,所以分割比较好!