关闭

Google Map模拟

标签: googlefunctioninitializationjavascriptborderiframe
894人阅读 评论(1) 收藏 举报

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>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:237530次
    • 积分:4330
    • 等级:
    • 排名:第6935名
    • 原创:188篇
    • 转载:3篇
    • 译文:0篇
    • 评论:107条
    文章分类