用js实现图的缩放和拖动显示,
来源：互联网 发布：有趣电脑软件 编辑：程序博客网 时间：2024/05/18 22:51
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="600" border="0">
<tr>
<td width="500" height="500"><div id="pic1" onmousedown="down()" onmouseup="up()"></div></td>
<td><a href="javascript:add()">+</a><br />
<a href="javascript:dec()">-</a></td>
</tr>
</table>
<script language="JavaScript" type="text/javascript">...
picInfo=[
...{x:722,y:513,url:"img/001.jpg"},
...{x:1445,y:1027,url:"img/002.jpg"},
...{x:2889,y:2053,url:"img/003.jpg"}
];
downx=0;
downy=0;
currImg=0;
function setPic()...{
var picObj=document.getElementById("pic1");
picObj.style.backgroundImage="url("+picInfo[currImg].url+")";
}
function add()...{
currImg=currImg+1;
if(currImg>=picInfo.length-1)
currImg=picInfo.length-1;
setPic();
}
function dec()...{
currImg=currImg-1;
if(currImg<0)
currImg=0;
setPic();
}
function down()...{
var picObj=document.getElementById("pic1");
downx=parseInt(event.clientX);
downy=parseInt(event.clientY);
picObj.style.cursor="hand";
}
function up()...{
var currentX,currentY;
var picObj=document.getElementById("pic1");
setPic();
//alert("x="+(downx-parseInt(event.clientX))+";y="+(downy-parseInt(event.clientY)));
if(picObj.style.backgroundPositionX=="")
currentX=0;
else...{
currentX=parseInt(picObj.style.backgroundPositionX);
}
if(picObj.style.backgroundPositionY=="")
currentY=0;
else...{
currentY=parseInt(picObj.style.backgroundPositionY);
}
var moveX=currentX+parseInt(event.clientX)-downx;
var moveY=currentY+parseInt(event.clientY)-downy;
if(moveX>0)...{
moveX=0;
}else
...{
if(500-moveX>picInfo[currImg].x)
moveX=-(picInfo[currImg].x-500);
}
if(moveY>0)...{
moveY=0;
}else
...{
if(500-moveY>picInfo[currImg].y)
moveY=-(picInfo[currImg].y-500);
}
picObj.style.backgroundPositionY=moveY+"px";
picObj.style.backgroundPositionX=moveX+"px";
picObj.style.cursor="auto";
}
setPic();
</script>
</body>
</html>
