45fan.com - 路饭网

搜索: 您的位置主页 > 网络频道 > 阅读资讯:通过JavaScript实现图片的放大、缩小和平移的方法

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

2016-08-30 12:35:52 来源:www.45fan.com 【

通过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
Tags: 实现 JavaScript 图片
编辑:路饭网
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部