现在在页面上,有一个 地图,用鼠标选中其中的某个区域范围,然后放大该范围内的地图,请问各位大虾,怎么实现啊,我是刚学的,还望各位大虾多多指教。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style type="text/css">
<!--
.unnamed1 {
position: absolute;
visibility: inherit;
height: 100px;
width: 100px;
z-index: 100;
top:0px;
left:0px;
background-color:#66FF99;
filter:Alpha(opacity=30);
cursor: hand;
}
body {
margin-left: 0px;
margin-top: 0px;
}
-->
</style>
</head>
<body>
<img src="http://www.5pk.cn/infoPic/pic28/pic28089c1.jpg" />
<div id="div_sel" class="unnamed1" onMouseUp="lostFocus()" onMouseDown="getStart()" onMouseMove="move()" onMouseOut="lostFocus()" > </div>
<script>
var isMove = false;
var posX = 0;
var posY = 0;
function getStart()
{
isMove = true;
posX = event.clientX;
posY = event.clientY;
}
function move()
{
if(isMove == true)
{
var newPosX = event.clientX;
var newPosY = event.clientY;
var x = newPosX - posX;
var y = newPosY - posY;
document.getElementById("div_sel").style.pixelTop += y;
document.getElementById("div_sel").style.pixelLeft += x;
posX = newPosX;
posY = newPosY;
showImg();
}
}
function lostFocus()
{
isMove = false;
}
function showImg()
{
//document.getElementById("img_rs").src = "";
}
</script>
</body>
</html>