在网页上如何实现图形的缩放和平移

这段时间浏览了城市地图的相关页面,想自己试着做一下,不知道怎么做,请各位大侠赐教

19 个解决方案

#1

缩放这个还没有想好，但是平移还是有点方法的。事先把要显示面积9倍的图片装载到页面，然后把多余的部分隐藏起来，然后当客户端拖拽时，使用ajax在后台继续加载，显示。据说googlemap就是这么做的吧？：）

#2

能不能给出源码

#3

平移图片
<html>
<head>
<style type="text/css">
.drag{position:relative;cursor:hand}
</style>
<script language="javascript">
var dragapproved = false;
var z,x,y
function move()
{
if(event.button==1&&dragapproved)
{
z.style.pixelLeft=temp1+event.clientX-x
z.style.pixelTop = temp2+event.clientY-y
return false;
}
}
function drags()
{
if(!document.all)
return
if(event.srcElement.className=="drag")
{
dragapproved = true
z=event.srcElement;
temp1=z.style.pixelLeft
temp2=z.style.pixelTop
x=event.clientX
y=event.clientY
document.onmousemove=move
}
}
document.onmousedown=drags
document.onmouseup=new Function("dragapproved=false")
</script>
</head>
<body>
<img src="Date/c.jpg" class="drag" border="0" alt="Image">
</body>
</html>

#4

<HTML>
<HEAD>
<title>平移图片</title>
<style type="text/css">
.drag{position:relative;cursor:hand}
</style>
<script language="javascript">

var dragapproved = false;
var z,x,y

function zoomimg(img)
{
//img.style.zoom获取img对象的缩放比例，并转为十进制整数
var zoom = parseInt(img.style.zoom,10);
if (isNaN(zoom))
{ //当zoom非数字时zoom默认为100％
zoom = 100;
}
//event.wheelDelta滚轮移动量上移＋120，下移－120；显示比例每次增减10％
zoom += event.wheelDelta / 12;
//当zoom大于10％时重新设置显示比例
if (zoom>10) img.style.zoom = zoom + "%";
}

function move()
{
if(event.button==1&&dragapproved)
{
z.style.pixelLeft=temp1+event.clientX-x
z.style.pixelTop = temp2+event.clientY-y
return false;
}
}

function drags()
{
if(!document.all) return
if(event.srcElement.className=="drag")
{
dragapproved = true
z=event.srcElement;
temp1=z.style.pixelLeft
temp2=z.style.pixelTop
x=event.clientX
y=event.clientY
document.onmousemove=move
}
}

document.onmousedown=drags
document.onmouseup=new Function("dragapproved=false")
</script>
</HEAD>
<body>
<IMG class="drag" alt="Image" src="Date/c.jpg" onmousewheel="zoomimg(this)" border="0">
</body>
</HTML>

#5

这样就实现了图形的缩放和平移了．但效率不怎么高，发出来让你看看，不知能否对它进行优化和美化一下．谢谢

#6

还有平移的时候，滚动条怎么不跟着动？不知道能不能解决

#7

好象还有更简单的方式实现图片缩放

#8

还有更简单的方式?
无限期待……

#9

按照snoweagle出示的源码运行,会有以下几个问题
1.平移的时候,滚动条不会跟着图形的移动而变化
2.图形在平移到最底部的时候,再进行缩放时,图形的上部分会不论怎么平移都显示不出来,好像图形的上部分丢失了,而图形的下部分则加长了一部分空白
还请大家帮忙解决!!

#10

学习!

#11

最好要有webGis平台支持。
参看一下，http://www.everywhere.com.cn/map

#12

http://www.codeproject.com/aspnet/LatLaysFlat-Part1.asp

看看这个效果。类似于GOOGLE MAP的

#13

Google地图的源码,好!,以前看过这个效果,但是不知道怎么弄的,没想到仁兄能找到它的源码.这真是意外收获.

#14

今天又找到一个网址,里面也有图形缩放的处理,效果还不错
http://www.devdao.com/article/302642.html
不过,我还是想看看大家可还有更高效的方法

#15

路过还没实践值得收藏！！！

#16

大家还有更好的方法吗？

#17

如果三天内大家还没有什么更好的方法,我将结贴.谢谢大家的参与!

#18

mark

#19

补充:
如何实现框选放大?

#20

#1

#2