通过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