阿南的有趣吧

http://www.webfuny.cn

Google Map模拟

fram.html:

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 1</title>
<script language=javascript>
function forbiddenclick() { //函数功能,如果当前点击右键,返回false
if (event.button==2)
 {
 return false;
 }
}
document.onmousedown=forbiddenclick;//禁止右键
document.onselectstart=returnFalse; //禁止文档选择
function returnFalse() { return false; }
document.oncontextmenu=new Function("event.returnValue=false;");//禁止右键动作
</script>
</head>

<body leftmargin="0" topmargin="0">
<iframe id=main border=0 frameborder="0" src="index.htm" width="490" height="400" scrolling="no" name="aa">
</iframe>
</body>

</html>

index.htm:

<html>
<title></title>
<head>
<SCRIPT language=JavaScript1.2>
<!--
document.onselectstart=returnFalse;
function returnFalse() { return false; }
document.oncontextmenu=new Function("event.returnValue=false;");

var ie=document.all
var ns6=document.getElementById&&!document.all


///////控制层的拖动
var xN,yN;  //设置了层的规格
var picWidth=2600; //整个大图的宽度2592
var picHeight = 2000; //整个大图的高度1944
var viewWidth = 490;
var viewHeight = 400; //定义了浏览框的尺寸
var sX,sY,sZ  //这里是一个mission的全局控制量,浏览视窗相对大图所在的位置,以左上为基准
var fX,fY //用来记录载入图片的索引
var dragapproved=false
var z,x,y
var temp1,temp2


function definePosition(diva,divX,divY){  //根据层被拖动后的位置,调整层的定位,以及决定是否需要重载图片
sX -= parseInt(divX,10)-temp1;
sY -= parseInt(divY,10)-temp2;
var re = true;
 if(divX>0)
 {
  diva.style.left = divX - (Math.floor(divX/200)+1)*200;
  fX -= Math.floor(divX/200)+1;
  re = false;
 }
 else if(divX<viewWidth-200*xN)
 {
  
  diva.style.left = divX + (Math.floor((viewWidth-200*xN-divX)/200)+1)*200;
  fX += Math.floor((viewWidth-200*xN-divX)/200)+1;
  re = false;
 }


 if(divY>0)
 {
  diva.style.top = divY - (Math.floor(divY/200)+1)*200;
  fY -= Math.floor(divY/200)+1;
    re = false;
 }
 else if(divY<viewHeight-200*yN)
 {
  diva.style.top = divY + (Math.floor((viewHeight-200*yN-divY)/200)+1)*200;
  fY += Math.floor((viewHeight-200*yN-divY)/200)+1;
  re = false;

 }
 return re;
}

function drags(eventObject){
 if(eventObject.button==1&&eventObject.srcElement.tagName.toString()=="IMG"){
 temp1=parseInt(moveDiva.style.left,10);
 temp2=parseInt(moveDiva.style.top,10);
 x=parseInt(eventObject.clientX,10);
 y=parseInt(eventObject.clientY,10);
 dragapproved = true;
 moveDiva.setCapture();
 }
 return false;
}

function divaMouseup(eventObject){
 if(eventObject.button==1&&dragapproved)
 {
 dragapproved=false;
 moveDiva.releaseCapture();
 checkOutYN();
 if(!definePosition(moveDiva,parseInt(moveDiva.style.left,10),parseInt(moveDiva.style.top,10)))reloadPic(fX,fY);
 } 
 
 return;
 }

function divaMove(eventObject){
 if(dragapproved &&eventObject.button==1)
  {
   moveDiva.style.left=temp1+parseInt(eventObject.clientX,10)-x;
   moveDiva.style.top=temp2+parseInt(eventObject.clientY,10)-y;
  }
 return;
}

function checkOutYN(){
var changedX = sX-parseInt(moveDiva.style.left,10)+temp1;
var changedY = sY-parseInt(moveDiva.style.top,10)+temp2;

if(changedX<=0)
{
 moveDiva.style.left = temp1+sX;
}
else if(changedX>=picWidth-viewWidth)
{
 moveDiva.style.left =temp1-(picWidth-viewWidth-sX);
}
if(changedY<=0)
{
 moveDiva.style.top = temp2+sY;
}
else if(changedY>=picHeight-viewHeight)
{
 moveDiva.style.top=temp2-(picHeight-viewHeight-sY);
}
return true;
}
//-->

function reloadPic(formatX,formatY){ //当确定需要重载图片后,进行载入图片

for(i=1;i<=yN;i++)
 {
  for(j=1;j<=xN;j++)
  {
   document.getElementById("pic"+i+"_"+j).src = "images/"+(fY+i).toString()+"_"+(fX+j).toString()+".jpg";
  }
 }
}


function loadPic(sessionX,sessionY,sessionZ){ //此函数用于根据当前层的位置,载入相应的图片divX、divY表示层的当前位置
           //divZ表示当前所处的放大倍数,xNum和yNum则显示了当前层需要载入图片的规格
 var startX = Math.floor(sessionX/200);
 fX = startX;
 var startY = Math.floor(sessionY/200);
 fY = startY;
 for(i=1;i<=yN;i++)
 {
  for(j=1;j<=xN;j++)
  {
   document.getElementById("pic"+i+"_"+j).src = "images/"+(startY+i).toString()+"_"+(startX+j).toString()+".jpg";
  }
 }          

}

function initialization(sessionX,sessionY,xNum,yNum){  //初始化元素,xNum和yNum指定了载入图片的数量
var iniStr = "<table border=/"0/" width=/"100%/" id=/"table1/" cellspacing=/"0/" cellpadding=/"0/" onselect=/"return false;/">";
for(i=1;i<=yNum;i++)
 {
  iniStr += "<tr>";
  for(j=1;j<=xNum;j++)
   {
    iniStr += "<td width=/"200/" height=/"200/">";
    iniStr += "<img id=/"pic"+i+"_"+j+"/" width=/"100%/" height=/"100%/" onerror=/"this.src='images/spacer.gif'/">";
    iniStr += "</td>";
   }
  iniStr += "</tr>";
 }
iniStr += "</table>";

document.getElementById("moveDiva").style.width = 200*xNum;
document.getElementById("moveDiva").style.height = 200*yNum;
document.getElementById("moveDiva").innerHTML = iniStr;
xN = xNum;
yN = yNum;
sX = sessionX;
sY = sessionY;
moveDiva.style.left = -sX%200;
moveDiva.style.top = -sY%200;
loadPic(sessionX,sessionY,1);
}
//-->

</SCRIPT>
</head>
<body leftmargin="0" topmargin="0" bgcolor="#FFFFCC">
 <div id="moveDiva" onmousedown="drags(event)" onmousemove="divaMove(event)" onmouseup="divaMouseup(event)" style=" LEFT:0px; POSITION:absolute; TOP:0px;background:#cc0000; Z-INDEX:1">
loading HTML...
</div>
</body>
</html>
<script language="javascript">
initialization(1640,850,4,4);
</script>

阅读更多
上一篇html也传参数
下一篇关于导师
想对作者说点什么? 我来说一句

google map api 最新参考文档

2010年09月04日 94KB 下载

MAP地图google使用方法

2009年09月19日 5KB 下载

Google Map 地图描绘运动轨迹

2013年04月19日 31.48MB 下载

Google Map及其开发_课件

2011年05月03日 79KB 下载

Google Map Reduce 中文版 论文

2010年02月03日 249KB 下载

google map api

2011年10月19日 3.57MB 下载

GoogleMapsAPIv3(3.16.2)离线开发

2016年06月08日 2.5MB 下载

Google Maps API开发大全

2010年03月06日 1.38MB 下载

没有更多推荐了,返回首页

关闭
关闭