浏览 5154 次
|
锁定老帖子 主题：关于map的问题 clip和边界
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2007-04-04
这2天一直在弄这个map的问题，希望各位给点建议或者意见，帮忙一下~~
1 如何判断当图片移出了蓝色框范围外，使它回到蓝色框内？ 也就是说超出边界。回到能显示的范围内。不要让人看见出现白色的底色。 2 如何使图片只显示在可见范围内【即显示层的那个大小】的那部分，我知道用clip ，但是一直没试出来。 (就如maps.baidu.com的那个效果) <!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 onload="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>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2007-04-04
问题1：
图片移出，指的是图片完全移出蓝色框， 还是指图片移动使得蓝色框露出白底 是移动过程中始终保持不能移出， 还是移动结束，鼠标松开后将其移回？ 可以用取得innerDiv.style.left和innerDiv.style.top， 再根据层和图片的style.width和style.height来判断图片位置是否符合要求，再行处理 问题2： 同样是取得几个值，然后根据情况更改style.clip的值 |
| 返回顶楼 | |
|
发表时间：2007-04-04
@7thbyte
1.图片移出，是指图片图片移动使得蓝色框露出白底，也就是说那边根本就没图片了。在移动结束，鼠标松开(up)后将其移回。 还有bug就是图片是移动的过程中，如果鼠标移动出了蓝色框，当你移回来时，图片直接又跟着鼠标动。你应该看到了吧。 2.应该是这样吧，取那几个相对坐标，然后算距离，一直没试出来... |
| 返回顶楼 | |
|
发表时间：2007-04-04
先第二个问题
代码里面outterDiv和innerDiv中间还隔着一层Div 由于它的存在写起来颇费一番周折 估计lz也是卡在这上面 针对lz的程序 第二个问题试试看应该可以这样：
function setImageClip(){
var innerDiv = document.getElementById("innerDiv");
var outerDiv=document.getElementById("outerDiv");
var img=document.getElementById("pb01");
var v1=parseInt(innerDiv.style.top)+10;
var v2=parseInt(innerDiv.style.left)+10;
var v3=parseInt(outerDiv.clientWidth)-v2;
var v4=parseInt(outerDiv.clientHeight)-v1;
v1=v1<0?-v1:0;
v2=v2<0?-v2:0;
img.style.clip="rect("+v1+"px,"+v3+"px,"+v4+"px,"+v2+"px)";
}
这里是让图片沿outerDiv被切割的，而中间的div的padding是10 所以v1和v2都加了10 另外中间的div右边界超越了outerdiv，所以v3和v4的计算参考的是outerDiv的宽高 以前写过类似的例子，还可以把图片的上一层div的position设置成absolute，overflow设为hidden 然后动态改变div大小，可以取得类似效果 |
| 返回顶楼 | |
|
发表时间：2007-04-04
好了，在lz的程序基础上写的，判断是否移出并调整位置
由于那个padding:10px的存在，所以若干地方有-10..
function setImagePlace(){
var innerDiv = document.getElementById("innerDiv");
var outerDiv=document.getElementById("outerDiv");
var img=document.getElementById("pb01");
var l=parseInt(innerDiv.style.left);
var t=parseInt(innerDiv.style.top);
if(l>-10) innerDiv.style.left="-10px";
if(t>-10) innerDiv.style.top="-10px";
if(parseInt(outerDiv.clientWidth)-l-10>img.width)
innerDiv.style.left=parseInt(outerDiv.clientWidth)-10-img.width+"px";
if(parseInt(outerDiv.clientHeight)-t-10>img.height)
innerDiv.style.top=parseInt(outerDiv.clientHeight)-10-img.height+"px";
}
|
| 返回顶楼 | |
|
发表时间：2007-04-05
@7thbyte
多出来的那个层是拿来放东南西北4个方向移动的图片，只是没加进去啊。 非常感谢啊. 如果继续改，问题又出来了，现在的情况是只用了一张大的地图， 但是实际上应该是由许多小的图片拼凑起来的,这样就会更烦琐，需要计算每张图片的clip的大小。 如下图: |
| 返回顶楼 | |
|
发表时间：2007-04-06
这几天一直在类似baidumap(maps.baidu.com)的一个应用，之前听说当用户移动地图时向服务器异步取图片，以为这里用了xmlhttp，其实没有，只是在js里计算好，移到需要的图片，直接向服务器下载摆了。不知道这样和用xmlhttp取有何好坏之处？
另外一直搞不懂，baidumap在拖动时，只显示固定大小的图片，其实它是一张整的图片，但是为什只显示一部份?用了Clip这个属性，这样做只是为了好看一点？ |
| 返回顶楼 | |
