关于map的问题 clip和边界

最新推荐文章于 2021-12-11 21:13:10 发布

bat_net

最新推荐文章于 2021-12-11 21:13:10 发布

阅读量193

点赞数

分类专栏： Ajax 文章标签： IE 应用服务器 UP

Ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这2天一直在弄这个map的问题，希望各位给点建议或者意见，帮忙一下~~
1 如何判断当图片移出了蓝色框范围外，使它回到蓝色框内？
也就是说超出边界。回到能显示的范围内。不要让人看见出现白色的底色。
2 如何使图片只显示在可见范围内【即显示层的那个大小】的那部分，我知道用clip ，但是一直没试出来。
(就如maps.baidu.com的那个效果)
[code]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Cqupt CM </TITLE>
<style type="text/css">
h1 {
font: 20pt sans-serif;
}

/*外部窗口层，用于显示地图。*/
#outerDiv {
height: 200px;
width: 300px;
border: 1px solid blue;
position: relative;
overflow: hidden;
}

/*内部层，用于装载地图图片，图片就放在里面。*/
#innerDiv {
position: relative;
left: 0px;
top: 0px;
}
</style>

<script type="text/javascript">

var dragging = false; // 是否在拖动标志 false：不是 true ：是
var top; // 内部层的顶部坐标即Y
var left; // 内部层的左边坐标即X
var dragStartTop; // 拖放开始时的坐标
var dragStartLeft; // 拖放结束时的坐标

function init() {
// make inner div big enough to display the map
// 使内部层足够大，可以显示地图
setInnerDivSize('800px', '700px');

// 设置监听器监听事件
var outerDiv = document.getElementById("outerDiv");

outerDiv.onmousedown = startMove; //鼠标按下
outerDiv.onmousemove = processMove; //鼠标移动
outerDiv.onmouseup = stopMove; //鼠标弹起

// necessary to enable dragging on IE
outerDiv.ondragstart = function() { return false; }

var innerDiv = document.getElementById("innerDiv");

img = document.createElement("img");
img.src = "http://mappng.baidu.com/maplite/mapbank/baidu/1/0_0/5_1.png";
img.style.position = "absolute";
img.style.left = "0px";
img.style.top = "0px";
img.style.zIndex = 0;
img.setAttribute("id", "pb01");
innerDiv.appendChild(img);

}
function startMove(event) {
// necessary for IE
if (!event) event = window.event;

dragStartLeft = event.clientX;
dragStartTop = event.clientY;
var innerDiv = document.getElementById("innerDiv");
innerDiv.style.cursor = "-moz-grab";
top = stripPx(innerDiv.style.top);
left = stripPx(innerDiv.style.left);

dragging = true;
return false;
}

function processMove(event) {
if (!event) event = window.event; // for IE
var innerDiv = document.getElementById("innerDiv");
if (dragging) {
innerDiv.style.top = top + (event.clientY - dragStartTop);
innerDiv.style.left = left + (event.clientX - dragStartLeft);
}

}

function stopMove() {
var innerDiv = document.getElementById("innerDiv");
innerDiv.style.cursor = "";
dragging = false;

status='在当前窗口中的X, Y坐标 : ( '+event.clientX+', '+event.clientY +')'+' 内部层的Top：'+innerDiv.style.top+' 内部层的Left：'+innerDiv.style.left;
}
function stripPx(value) {
if (value == "") return 0;
return parseFloat(value.substring(0, value.length - 2));
}

function setInnerDivSize(width, height) {
var innerDiv = document.getElementById("innerDiv");
innerDiv.style.width = width;
innerDiv.style.height = height;
}
</script>

</HEAD>

<BODY οnlοad="init()">
<div id="outerDiv">
<div style="position: absolute; top: 10px; left: 10px; z-index: 1">

<div id="innerDiv" style="z-index: 0">
</div>
</div>

</BODY>
</HTML>[/code]