求一个地图似的源码，就是在一张图片上画一个方框然后放大图里内容

下面是我按你的要求的写的,基本实现了你说的功能.
有问题请在这里回帖或给我写信[email protected].最近我也在考虑这个问题.
<HTML>
<HEAD>
<TITLE>Zoom</TITLE>
<script type="text/javascript">
var bDown=false; // 鼠标按下标记
var x1=0; // 鼠标按下的 x
var y1=0; // 鼠标按下的 y
var x2=0; // 鼠标弹起的 x
var y2=0; // 鼠标弹起的 y
var cx=0; // 拉框的宽度
var cy=0; // 拉框的高度
var x0=0; // 拉框的左上方X
var y0=0; // 拉框的左上方Y
var picWidth=500; // 图片出场宽度
var picHeight=400; // 图片出场高度
var iLeft=0; // 图片容器的左上角left
var iTop=0; // 图片容器的左上角top
function win_onload(){
initLayer2();
}
// 将Layer2叠加在Layer1的上方
function initLayer2(){
iLeft = getPos(Layer1,"Left");
iTop = getPos(Layer1,"Top");
Layer2.style.left = iLeft;
Layer2.style.top = iTop;
}
// 取得对象的绝对位置
function getPos(el,sProp) {
var iPos = 0;
while (el!=null) {
iPos+=el["offset" + sProp];
el = el.offsetParent;
}
return iPos;
}
function Layer2_onMouseDown(){
bDown = true;
x1 = parseInt(event.offsetX);
y1 = parseInt(event.offsetY);
//window.status = x1+"-"+y1;
showFrame();
}
function Layer2_onMouseUp(){
bDown = false;
x2 = parseInt(event.offsetX);
y2 = parseInt(event.offsetY);
//window.status = x2+"-"+y2;
cx = Math.abs(x2-x1);
cy = Math.abs(y2-y1);
x0 = (x1>x2)?x2:x1;
y0 = (y1>y2)?y2:y1;
// window.status = x0+" "+y0+" "+cx+" "+cy;
hideFrame();
zoom();
}
function Layer2_onMouseMove(){
if (bDown==false) return;
drawFrame();
}
function zoom(){
var x=0; // 图片实际需要放大的CX
var y=0; // 图片实际需要放大的CY
var picOffsetX=0;
var picOffsetY=0;
var picWidth1=0;
var picHeight1=0 ;
if (cx==0 || cy==0) return; // 判断是否有选定范围
picScale=picWidth/picHeight // 图片宽高比
if (cx/cy > picScale){ // 
x=cx;
y=parseInt(cx/picScale);
}else{
y=cy;
x=parseInt(cx*picScale);
}
picWidth1 =parseInt(picWidth*picWidth/x);
picHeight1 =parseInt(picHeight*picHeight/y);
picOffsetX =parseInt((picWidth1-picWidth)/2);
picOffsetY =parseInt((picHeight1-picHeight)/2);
pic.style.width =picWidth1;
pic.style.height=picHeight1;
pic.style.left =-picOffsetX;
pic.style.top =-picOffsetY;

}
// 显示拉框div
function showFrame(){
Layer3.style.visibility="visible";
}
// 隐藏拉框div
function hideFrame(){
with (Layer3.style){
left=0;
top=0;
width=0;
height=0;
visibility="hidden";
}
}
// 绘制框的外观
function drawFrame(){
var x0=0;
var y0=0;
var x2=0;
var y2=0;

x2 = parseInt(event.offsetX);
y2 = parseInt(event.offsetY);
cx = Math.abs(x2-x1);
cy = Math.abs(y2-y1); x0 = (x1>x2)?x2:x1;
y0 = (y1>y2)?y2:y1;

var frameLeft = parseInt(x0)+parseInt(iLeft);
var frameTop = parseInt(y0)+parseInt(iTop);
Layer3.style.left = frameLeft;
Layer3.style.top = frameTop;
Layer3.style.width = cx;
Layer3.style.height = cy;
}
</script>
</HEAD><BODY onLoad="win_onload()">
<!--Layer2层叠加在Layer1层的正上方,且大小和Layer1相同-->
<div id="Layer2" style="filter: alpha(Opacity=0);position:absolute; left:0px; top:0px; width:500px; height:400px; z-index:3; background-color: #6666FF; layer-background-color: #6666FF; border: 1px none #000000;" onMouseDown="Layer2_onMouseDown()" onMouseUp="Layer2_onMouseUp()" onMouseMove="Layer2_onMouseMove()"></div>
<!--拉框的时候实时绘制的效果层-->
<div id="Layer3" style="filter: alpha(opacity=20); position:absolute; left:0px; top:0px; width:0px; height:0px; z-index:2; visibility: hidden; background-color: #FFFF00; layer-background-color: #FFFF00; border: 1px dotted #000000;"></div>
<table width="500"  height="420" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height=20 width=500>在下面图片上拉框放大</td>
  </tr>
  <tr>
    <td height=400 width=500>
<div id="Layer1" style="position:relative; left:0px; top:0px; width:500px; height:400px; z-index:1; overflow: hidden;"><img src="http://www.gistar.com.cn/images/database_package20.jpg" style="position:relative; left:0px; top:0px; width:500px; height:400px;" id="pic"></div>
</td>
  </tr>
</table>
</BODY>
</HTML>

解决方案 »

  1.   

    可以在这个链接看效果
    http://211.90.237.18/zhujh/zoom.htm
      

  2.   

    太谢谢 rawjim(Rawjim) 了 我还想接着问下如果我想在这个地图上加上超级连接，应该怎么做？
      

  3.   

    用JS只能控制一个整张的图的总大小,但是可以通过选定区域后,再按需要改变整个图的大小后再移位,但是位图这样搞太大后就会变形,还是用FASH的矢图好点,
    加链接可以通过动态设置热点的方法来设置你拉出的正文形哉的链接
      

  4.   

    用ANFY javascript 特效工具  可视化的生成折中特效
    52种特效
    多种参数，傻瓜化操作