通过JavaScript实现图片的放大、缩小和平移的方法

<script>

var ZoomStutas;

var dragapproved=false;

var z,x,y,temp1,temp2;

var count = 10;

function ZoomIn()

{

IMG.style.cursor="Images/ZoomIn1.ICOZoomStutas="ZoomIn";

}

function ZoomOut()

{

IMG.style.cursor="Images/ZoomOut1.ico";//改变鼠标指针

ZoomStutas="ZoomOut";

}

function Pan()

{

IMG.style.cursor="Hand";//改变鼠标指针

ZoomStutas="Pan";

}

//放大、缩小

function Zoom()

{

if(ZoomStutas=="ZoomIn")

{

var hX=IMG.height;

var hY=IMG.width;

IMG.height=hX*1.5;

IMG.width=hY*1.5;

}

else if(ZoomStutas=="ZoomOut")

{

var hX=IMG.height;

var hY=IMG.width;

IMG.height=hX/1.5;

IMG.width=hY/1.5;

}

else if(ZoomStutas=="Pan")

{

}

}

//平移

function move()

{

if (dragapproved&&ZoomStutas=="Pan")

{

IMG.style.pixelLeft=temp1+event.clientX-x;

IMG.style.pixelTop=temp2+event.clientY-y;

return false;

}

}

function drags()

{

dragapproved=true;

x=event.clientX

y=event.clientY

temp1=IMG.style.pixelLeft;

temp2=IMG.style.pixelTop;

document.onmousemove=move;

}

document.onmousedown=drags;

document.onmouseup=new Function("dragapproved=false");

function Picture()

{

count = Counting(count);

Resize(count);

return false;

}

function Counting(count)

{

if (event.wheelDelta >= 120)

{

count++;

}

else if (event.wheelDelta <= -120)

{

count--;

}

return count;

}

function Resize(count)

{

IMG.style.zoom = count + '0%';

}

function KeyDown()

{

if (event.keyCode!=1||event.KeyCode!=2 ||event.KeyCode!=4)

{

event.keyCode=0;

event.returnValue=false;

}

}

</script>

本文地址：http://www.45fan.com/a/question/69773.html