用js实现图的缩放和拖动显示,

zxwwjs

浏览: 9827 次
来自: ...

最近访客更多访客>>

snowstorm

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (20)

社区版块

存档分类

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

<title>无标题文档</title>

<linkhref="main.css"rel="stylesheet"type="text/css"/>

</head>

<body>

<tablewidth="600"border="0">

<tr>

<tdwidth="500"height="500"><divid="pic1"onmousedown="down()"onmouseup="up()"></div></td>

<ahref="javascript:dec()">-</a></td>

</tr>

</table>

<scriptlanguage="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;

functionsetPic(){

varpicObj=document.getElementById("pic1");

picObj.style.backgroundImage="url("+picInfo[currImg].url+")";

}

functionadd(){

currImg=currImg+1;

if(currImg>=picInfo.length-1)

currImg=picInfo.length-1;

setPic();

}

functiondec(){

currImg=currImg-1;

if(currImg<0)

currImg=0;

setPic();

}

functiondown(){

varpicObj=document.getElementById("pic1");

downx=parseInt(event.clientX);

downy=parseInt(event.clientY);

picObj.style.cursor="hand";

}

functionup(){

varcurrentX,currentY;

varpicObj=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);

}

varmoveX=currentX+parseInt(event.clientX)-downx;

varmoveY=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>

分享到：

struts 2 笔记 | JAVA生成JPG缩略图

2007-11-23 22:52
浏览 616
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论