奇怪!!!!刚写的网页游戏地图移动的JS代码,在本地运行正常,上传到空间有异常!!!

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>map</title>
<link href="images/css.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/JavaScript" src="JS/map.js"></script>
<script language="javascript" type="text/javascript">
sniffBrowserType();
</script>
</head>
<body>
<div id="testdiv" style="position:absolute; left:0px; top:0px; z-index:2; text-align:center; color: #000000; font-weight:bold;">
<!--辅助调试表单<input type="text" id="test">-->
X:<input type="text" id="x" style="width:50px;" value="0">&nbsp;Y:<input type="text" id="y" style="width:50px;" value="0">&nbsp;<input type="button" id="an" value="Go" onClick="goXandY();" style="width:50px;">
</div>
<div id="up" style="position:absolute; left:226px; top:200px; width:47px; height:25px; z-index:2; text-align:center;">
<input type="button" id="up" value="Up" onClick="goMap('up');" style="width:40px; "></div>
<div id="down" style="position:absolute; left:226px; top:235px; width:47px; height:25px; z-index:2; text-align:center;">
<input type="button" id="down" value="Down" onClick="goMap('down');" style="width:40px; "></div>
<div id="left" style="position:absolute; left:180px; top:217px; width:47px; height:25px; z-index:2; text-align:center;">
<input type="button" id="left" value="Left" onClick="goMap('left');" style="width:40px; "></div>
<div id="right" style="position:absolute; left:272px; top:217px; width:47px; height:25px; z-index:2; text-align:center;">
<input type="button" id="right" value="Right" onClick="goMap('right');" style="width:40px; "></div><div id="map" style="position:absolute; left:-100px; top:-100px; width:700px; height:700px; z-index:1; background-color:#000000;">
<div style="width:100%;">
  <div id="map_r1_l1" style="float:left; width:100px; height:100px; background-image:url(images/map_r1_c1.jpg);"></div>
  <div id="map_r1_l2" style="float:left; width:100px; height:100px; background-image:url(images/map_r1_c2.jpg);"></div>
  <div id="map_r1_l3" style="float:left; width:100px; height:100px; background-image:url(images/map_r1_c3.jpg);"></div>
  <div id="map_r1_l4" style="float:left; width:100px; height:100px; background-image:url(images/map_r1_c4.jpg);"></div>
  <div id="map_r1_l5" style="float:left; width:100px; height:100px; background-image:url(images/map_r1_c5.jpg);"></div>
  <div id="map_r1_l6" style="float:left; width:100px; height:100px; background-image:url(images/map_r1_c6.jpg);"></div>
  <div id="map_r1_l7" style="float:left; width:100px; height:100px; background-image:url(images/map_r1_c7.jpg);"></div>
</div><div style="width:100%;">
  <div id="map_r2_l1" style="float:left; width:100px; height:100px; background-image:url(images/map_r2_c1.jpg);"></div>
  <div id="map_r2_l2" style="float:left; width:100px; height:100px; background-image:url(images/map_r2_c2.jpg);"></div>
  <div id="map_r2_l3" style="float:left; width:100px; height:100px; background-image:url(images/map_r2_c3.jpg);"></div>
  <div id="map_r2_l4" style="float:left; width:100px; height:100px; background-image:url(images/map_r2_c4.jpg);"></div>
  <div id="map_r2_l5" style="float:left; width:100px; height:100px; background-image:url(images/map_r2_c5.jpg);"></div>
  <div id="map_r2_l6" style="float:left; width:100px; height:100px; background-image:url(images/map_r2_c6.jpg);"></div>
  <div id="map_r2_l7" style="float:left; width:100px; height:100px; background-image:url(images/map_r2_c7.jpg);"></div>
</div><div style="width:100%;">
  <div id="map_r3_l1" style="float:left; width:100px; height:100px; background-image:url(images/map_r3_c1.jpg);"></div>
  <div id="map_r3_l2" style="float:left; width:100px; height:100px; background-image:url(images/map_r3_c2.jpg);"></div>
  <div id="map_r3_l3" style="float:left; width:100px; height:100px; background-image:url(images/map_r3_c3.jpg);"></div>
  <div id="map_r3_l4" style="float:left; width:100px; height:100px; background-image:url(images/map_r3_c4.jpg);"></div>
  <div id="map_r3_l5" style="float:left; width:100px; height:100px; background-image:url(images/map_r3_c5.jpg);"></div>
  <div id="map_r3_l6" style="float:left; width:100px; height:100px; background-image:url(images/map_r3_c6.jpg);"></div>
  <div id="map_r3_l7" style="float:left; width:100px; height:100px; background-image:url(images/map_r3_c7.jpg);"></div>
</div><div style="width:100%;">
  <div id="map_r4_l1" style="float:left; width:100px; height:100px; background-image:url(images/map_r4_c1.jpg);"></div>
  <div id="map_r4_l2" style="float:left; width:100px; height:100px; background-image:url(images/map_r4_c2.jpg);"></div>
  <div id="map_r4_l3" style="float:left; width:100px; height:100px; background-image:url(images/map_r4_c3.jpg);"></div>
  <div id="map_r4_l4" style="float:left; width:100px; height:100px; background-image:url(images/map_r4_c4.jpg);"></div>
  <div id="map_r4_l5" style="float:left; width:100px; height:100px; background-image:url(images/map_r4_c5.jpg);"></div>
  <div id="map_r4_l6" style="float:left; width:100px; height:100px; background-image:url(images/map_r4_c6.jpg);"></div>
  <div id="map_r4_l7" style="float:left; width:100px; height:100px; background-image:url(images/map_r4_c7.jpg);"></div>
</div><div style="width:100%;">
  <div id="map_r5_l1" style="float:left; width:100px; height:100px; background-image:url(images/map_r5_c1.jpg);"></div>
  <div id="map_r5_l2" style="float:left; width:100px; height:100px; background-image:url(images/map_r5_c2.jpg);"></div>
  <div id="map_r5_l3" style="float:left; width:100px; height:100px; background-image:url(images/map_r5_c3.jpg);"></div>
  <div id="map_r5_l4" style="float:left; width:100px; height:100px; background-image:url(images/map_r5_c4.jpg);"></div>
  <div id="map_r5_l5" style="float:left; width:100px; height:100px; background-image:url(images/map_r5_c5.jpg);"></div>
  <div id="map_r5_l6" style="float:left; width:100px; height:100px; background-image:url(images/map_r5_c6.jpg);"></div>
  <div id="map_r5_l7" style="float:left; width:100px; height:100px; background-image:url(images/map_r5_c7.jpg);"></div>
</div><div style="width:100%;">
  <div id="map_r6_l1" style="float:left; width:100px; height:100px; background-image:url(images/map_r6_c1.jpg);"></div>
  <div id="map_r6_l2" style="float:left; width:100px; height:100px; background-image:url(images/map_r6_c2.jpg);"></div>
  <div id="map_r6_l3" style="float:left; width:100px; height:100px; background-image:url(images/map_r6_c3.jpg);"></div>
  <div id="map_r6_l4" style="float:left; width:100px; height:100px; background-image:url(images/map_r6_c4.jpg);"></div>
  <div id="map_r6_l5" style="float:left; width:100px; height:100px; background-image:url(images/map_r6_c5.jpg);"></div>
  <div id="map_r6_l6" style="float:left; width:100px; height:100px; background-image:url(images/map_r6_c6.jpg);"></div>
  <div id="map_r6_l7" style="float:left; width:100px; height:100px; background-image:url(images/map_r6_c7.jpg);"></div>
</div><div style="width:100%;">
  <div id="map_r7_l1" style="float:left; width:100px; height:100px; background-image:url(images/map_r7_c1.jpg);"></div>
  <div id="map_r7_l2" style="float:left; width:100px; height:100px; background-image:url(images/map_r7_c2.jpg);"></div>
  <div id="map_r7_l3" style="float:left; width:100px; height:100px; background-image:url(images/map_r7_c3.jpg);"></div>
  <div id="map_r7_l4" style="float:left; width:100px; height:100px; background-image:url(images/map_r7_c4.jpg);"></div>
  <div id="map_r7_l5" style="float:left; width:100px; height:100px; background-image:url(images/map_r7_c5.jpg);"></div>
  <div id="map_r7_l6" style="float:left; width:100px; height:100px; background-image:url(images/map_r7_c6.jpg);"></div>
  <div id="map_r7_l7" style="float:left; width:100px; height:100px; background-image:url(images/map_r7_c7.jpg);"></div>
</div>
</div>
</body>
</html>????

解决方案 »

  1.   

    var isFirefox;
    var isIE;var movestep=50;//移动步长
    var ctrlRowDown=12;//方形地图最大单元格数
    var ctrlRowUp=1;//方形地图最小单元格数function sniffBrowserType() {
    isFirefox = ( navigator.appName == "Netscape" );
    isIE = (navigator.appName == "Microsoft Internet Explorer" ); 
    }function getElement( id ) 
    {
    if( isIE ) {
    return document.all[ id ];
    }
    else {
    return document.getElementById( id );
    }
    }function goMap(key)//执行地图移动的操作
    {
    //getElement("test").value=getElement("map_r1_l1").style.backgroundImage;
    //getElement("test").value=mathImageUrl(getElement("map_r1_l1").style.backgroundImage,"col");
        var getMap=getElement("map");
    switch(key)
    {
    case "down":
    if(parseInt(getMap.style.top)>-200)
    getMap.style.top=parseInt(getMap.style.top)-parseInt(movestep);
    break;

    case "up":
    if(parseInt(getMap.style.top)<0)
    getMap.style.top=parseInt(getMap.style.top)+parseInt(movestep);
    break;

    case "left":
    if(parseInt(getMap.style.left)<0)
    getMap.style.left=parseInt(getMap.style.left)+parseInt(movestep);
    break;

    case "right":
    if(parseInt(getMap.style.left)>-200)
    getMap.style.left=parseInt(getMap.style.left)-parseInt(movestep);
    break;
    }
    changeMap();
    getMap=null;
    }function catchMapDiv(getArray)//取得整个地图层的单元格
    {
    getArray[0]=new Array(getElement("map_r1_l1"),getElement("map_r1_l2"),getElement("map_r1_l3"),getElement("map_r1_l4"),getElement("map_r1_l5"),getElement("map_r1_l6"),getElement("map_r1_l7"));
    getArray[1]=new Array(getElement("map_r2_l1"),getElement("map_r2_l2"),getElement("map_r2_l3"),getElement("map_r2_l4"),getElement("map_r2_l5"),getElement("map_r2_l6"),getElement("map_r2_l7"));
    getArray[2]=new Array(getElement("map_r3_l1"),getElement("map_r3_l2"),getElement("map_r3_l3"),getElement("map_r3_l4"),getElement("map_r3_l5"),getElement("map_r3_l6"),getElement("map_r3_l7"));
    getArray[3]=new Array(getElement("map_r4_l1"),getElement("map_r4_l2"),getElement("map_r4_l3"),getElement("map_r4_l4"),getElement("map_r4_l5"),getElement("map_r4_l6"),getElement("map_r4_l7"));
    getArray[4]=new Array(getElement("map_r5_l1"),getElement("map_r5_l2"),getElement("map_r5_l3"),getElement("map_r5_l4"),getElement("map_r5_l5"),getElement("map_r5_l6"),getElement("map_r5_l7"));
    getArray[5]=new Array(getElement("map_r6_l1"),getElement("map_r6_l2"),getElement("map_r6_l3"),getElement("map_r6_l4"),getElement("map_r6_l5"),getElement("map_r6_l6"),getElement("map_r6_l7"));
    getArray[6]=new Array(getElement("map_r7_l1"),getElement("map_r7_l2"),getElement("map_r7_l3"),getElement("map_r7_l4"),getElement("map_r7_l5"),getElement("map_r7_l6"),getElement("map_r7_l7"));
    }function changeMap()//实行地图剪切缓冲图片功能
    {
        var getMapX=getElement("map").style.left;
    var getMapY=getElement("map").style.top;
    //判断人物向下移动时地图的走向
    if(parseInt(getMapY)<=-200 && parseInt(mathImageUrl(getElement("map_r7_l1").style.backgroundImage,"row"))<parseInt(ctrlRowDown))
    {
    var mapArray=new Array();
    catchMapDiv(mapArray);
    for(i=0;i<6;i++)
    {
    for(j=0;j<=6;j++)
    {
    mapArray[i][j].style.background=mapArray[i+1][j].style.backgroundImage;
    }
    }

    for(k=0;k<=6;k++)
    {
    mapArray[6][k].style.background=changeImageUrl(mapArray[6][k].style.backgroundImage,"y","down");
    }
    var getMap=getElement("map");
        getMap.style.top=parseInt(-100)-parseInt(movestep);
    getMap=null;
    mapArray=null;
    }
    //判断人物向上移动时地图的走向
    else if(parseInt(getMapY)>=0 && parseInt(mathImageUrl(getElement("map_r1_l1").style.backgroundImage,"row"))>parseInt(ctrlRowUp))
    {
    var mapArray=new Array();
    catchMapDiv(mapArray);
    for(i=5;i>=0;i--)
    {
    for(j=0;j<=6;j++)
    {
    mapArray[i+1][j].style.background=mapArray[i][j].style.backgroundImage;
    }
    }

    for(k=0;k<=6;k++)
    {
    mapArray[0][k].style.background=changeImageUrl(mapArray[0][k].style.backgroundImage,"y","up");
    }
    var getMap=getElement("map");
        getMap.style.top=parseInt(-100)+parseInt(movestep);
    getMap=null;
    mapArray=null;
    }
    //判断人物向左移动时地图的走向
    if(parseInt(getMapX)>=0 && parseInt(mathImageUrl(getElement("map_r1_l1").style.backgroundImage,"col"))>parseInt(ctrlRowUp))
    {
    var mapArray=new Array();
    catchMapDiv(mapArray);
    for(i=0;i<=6;i++)
    {
    for(j=5;j>=0;j--)
    {
    mapArray[i][j+1].style.background=mapArray[i][j].style.backgroundImage;
    }
    }

    for(k=0;k<=6;k++)
    {
    mapArray[k][0].style.background=changeImageUrl(mapArray[k][0].style.backgroundImage,"x","left");
    }
    var getMap=getElement("map");
        getMap.style.left=parseInt(-100)+parseInt(movestep);
    getMap=null;
    mapArray=null;
    }
    //判断人物向右移动时地图的走向
    else if(parseInt(getMapX)<=-200 && parseInt(mathImageUrl(getElement("map_r1_l7").style.backgroundImage,"col"))<parseInt(ctrlRowDown))
    {
    var mapArray=new Array();
    catchMapDiv(mapArray);
    for(i=0;i<=6;i++)
    {
    for(j=0;j<6;j++)
    {
    mapArray[i][j].style.background=mapArray[i][j+1].style.backgroundImage;
    }
    }

    for(k=0;k<=6;k++)
    {
    mapArray[k][6].style.background=changeImageUrl(mapArray[k][6].style.backgroundImage,"x","right");
    }
    var getMap=getElement("map");
        getMap.style.left=parseInt(-100)-parseInt(movestep);
    getMap=null;
    mapArray=null;
    }

    getMapX=null;
    getMapY=null;
    }function changeImageUrl(key,XorY,DownorUp)//改变缓冲图片层的图片背景链接
    {
    //key的格式:url(images/map_r7_c7.jpg)
    var show="";
    var row="";
    var col="";
    var cutArray1=key.split("url(images/map_r");
    var cutArray2=cutArray1[1].split("_c");
    var cutArray3=cutArray2[1].split(".jpg)");

    if(XorY=="y")
    {
    if(DownorUp=="down")
    {
    cutArray2[0]=parseInt(cutArray2[0])+1;
    }
    else if(DownorUp=="up")
    {
    cutArray2[0]=parseInt(cutArray2[0])-1;
    }
    }
    else if(XorY=="x")
    {
    if(DownorUp=="left")
    {
    cutArray3[0]=parseInt(cutArray3[0])-1;
    }
    else if(DownorUp=="right")
    {
    cutArray3[0]=parseInt(cutArray3[0])+1;
    }
    }
    row=cutArray2[0];
    col=cutArray3[0];
    show="url(images/map_r"+row+"_c"+col+".jpg)";
    cutArray1=null;
    cutArray2=null;
    cutArray3=null;
    return show;
    }function mathImageUrl(key,RoworCol)//换算图片的行数和列数
    {
    var show="";
    var cutArray1=key.split("url(images/map_r");
    var cutArray2=cutArray1[1].split("_c");
    var cutArray3=cutArray2[1].split(".jpg)");
    switch(RoworCol)
    {
    case "row":
    show=cutArray2[0];
    break;

    case "col":
    show=cutArray3[0];
    break;
    }
    cutArray1=null;
    cutArray2=null;
    cutArray3=null;
    return show;
    }function goXandY()
    {
    var getMap=getElement("map");
    var getX=getElement("x");
    var getY=getElement("y");
    getMap.style.top=getY.value;
    getMap.style.left=getX.value;
    changeMap();
    getMap=null;
    getX=null;
    getY=null;
    }没看出来问题哦
      

  2.   

    参见：
    RPG游戏地图卷动
    http://www.v-ec.com/dh20156/article.asp?id=124