网页开发一个div相对于另外一个div的精确定位的问题（以象棋的布

在网页开发的过程中，我们在布局上基本上都会采用div+css的形式，虽然css里面的百分号可以满足我们的div会相对于浏览器的大小发生变化，但是如果我要让一个多个div相对于一个div进行精确的定位，，那么这个方法就有些吃力了，我最近再写一个网络象棋对战平台，就遇到了这个问题，就是如何让我的棋子（图片）精确地位于棋盘（图片）的相应的额精确位置呢？一开始，我也是想到了css的百分号定义，然后发现这个实现太难了，于是我最后采用的是javascript脚本，ok,先看一下我们的基本素材，这里有一个我自己制作的棋盘图片：

然后这里是一个棋子的图片（我们以将为例）：

先声明一下，我这个棋盘的位置是高度扩充到整个浏览器的高度，宽度是居中显示的相应的布局代码如下：

然后我们来解决新的问题，如何让我的将，位于棋盘的相应位置呢？我使用的是如下的方法，首先把我们的棋盘图片在ps中打开，并且调出网格（因为最开始我制作这个棋盘的时候就是利用网格画的棋盘格），然后调整棋盘的位置和画布的大小使之的宽度和高度恰好是网格的整数倍数，（注意是画布，不是图像），然后就会呈现下面的效果：

然后我们设置我们的起始位置是棋盘格的最左上角那个位置，于是我们会发现，这个起始位置距离棋盘的左边缘4个棋盘格，距离棋盘的上边缘2个棋盘格，而且我们还会知道，整个棋盘的宽度是16个棋盘格。高度是13个棋盘格，有了这些我们就可以根据棋盘的大小来计算棋盘格的大小了（棋盘格是正方形）于是有：single_qipan=height/13;然后我们设置每个棋子的大小是：qizi=single_qipan/1.2;所以呢，这样来定位将就简单了，它的的横向位置：棋盘和浏览器左边缘的距离+8*棋盘格的大小-qizi/2，它的纵向位置就是：棋盘和浏览器上边缘的距离+2*棋盘格的大小-qizi/2，而且，我们还可以利用棋盘格建立一个数组来定位各个棋子的位置，也便于以后的下棋动作的操作。于是我们来定义两个数组，分别代表所有棋子的横纵坐标（我们个们每个棋子编号从1~32）于是有

//所有的棋子的坐标位置var array_x=[0,1,2,3,4,5,6,7,8,1,7,0,2,4,6,8,0,2,4,6,8,1,7,0,1,2,3,4,5,6,7,8];var array_y=[0,0,0,0,0,0,0,0,0,2,2,3,3,3,3,3,6,6,6,6,6,7,7,9,9,9,9,9,9,9,9,9];

然后呢，我们就可以整合一下了，下面是效果图：

有需要的朋友也可以看看这段代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="renderer" content="ie-comp"><!–兼容模式打开 –><title>楚河汉界</title><style type="text/css">html,body{margin:0px;padding:0px;height: 100%;width: 100%;background-image: url(../picture/play_bg.png);background-repeat: repeat;}.qizi{ z-index: 2;}#background{ z-index: 0;}</style><script type="text/javascript">var qipan_h;var qipan_w;var height;var width;var qizi;var single_qipan;//所有的棋子的坐标位置var array_x=[0,1,2,3,4,5,6,7,8,1,7,0,2,4,6,8,0,2,4,6,8,1,7,0,1,2,3,4,5,6,7,8];var array_y=[0,0,0,0,0,0,0,0,0,2,2,3,3,3,3,3,6,6,6,6,6,7,7,9,9,9,9,9,9,9,9,9];//js控制的界面的刷新 function start(){ height=document.documentElement.clientHeight; width=document.documentElement.clientWidth; /* console.log("height is "+height); console.log("width is "+width); */ qipan_h=height; qipan_w=height/921*1134;/* console.log("height is "+qipan_h); console.log("width is "+qipan_w); */ var object=document.getElementById("background"); object.style.height=qipan_h+"px"; object.style.width=qipan_w+"px"; object.style.left=(width-qipan_w)/2+"px"; object.style.position="absolute"; single_qipan=height/13; qizi=single_qipan/1.2; x0=(width-qipan_w)/2+qipan_w/16*4; y0=height/13*2; for(var i=0;i<32;i++){initqizi(i+1, array_x[i], array_y[i]);} } function initqizi(number,x,y){ var qizi_object=document.getElementById(number+""); qizi_object.style.height=qizi+"px"; qizi_object.style.width=qizi+"px"; qizi_object.style.left=x0+x*single_qipan-qizi/2+"px"; qizi_object.style.top=y0+y*single_qipan-qizi/2+"px"; qizi_object.style.position="absolute"; }</script></head><body onload="start();" ><div id="background"> <img src="../picture/final_qipan.png" height="100%"></div><div class="qizi" id="1"><img src="../picture/qizi_green_che.png" height="100%" ></div><div class="qizi" id="2"><img src="../picture/qizi_green_ma.png" height="100%"></div><div class="qizi" id="3"><img src="../picture/qizi_green_xiang.png" height="100%"></div><div class="qizi" id="4"><img src="../picture/qizi_green_shi.png" height="100%"></div><div class="qizi" id="5"><img src="../picture/qizi_green_jiang.png" height="100%"></div><div class="qizi" id="6"><img src="../picture/qizi_green_shi.png" height="100%"></div><div class="qizi" id="7"><img src="../picture/qizi_green_xiang.png" height="100%"></div><div class="qizi" id="8"><img src="../picture/qizi_green_ma.png" height="100%"></div><div class="qizi" id="9"><img src="../picture/qizi_green_che.png" height="100%"></div><div class="qizi" id="10"><img src="../picture/qizi_green_pao.png" height="100%"></div><div class="qizi" id="11"><img src="../picture/qizi_green_pao.png" height="100%"></div><div class="qizi" id="12"><img src="../picture/qizi_green_zu.png" height="100%"></div><div class="qizi" id="13"><img src="../picture/qizi_green_zu.png" height="100%"></div><div class="qizi" id="14"><img src="../picture/qizi_green_zu.png" height="100%"></div><div class="qizi" id="15"><img src="../picture/qizi_green_zu.png" height="100%"></div><div class="qizi" id="16"><img src="../picture/qizi_green_zu.png" height="100%"></div><div class="qizi" id="17"><img src="../picture/qizi_red_bing.png" height="100%"></div><div class="qizi" id="18"><img src="../picture/qizi_red_bing.png" height="100%"></div><div class="qizi" id="19"><img src="../picture/qizi_red_bing.png" height="100%"></div><div class="qizi" id="20"><img src="../picture/qizi_red_bing.png" height="100%"></div><div class="qizi" id="21"><img src="../picture/qizi_red_bing.png" height="100%"></div><div class="qizi" id="22"><img src="../picture/qizi_red_pao.png" height="100%"></div><div class="qizi" id="23"><img src="../picture/qizi_red_pao.png" height="100%"></div><div class="qizi" id="24"><img src="../picture/qizi_red_che.png" height="100%"></div><div class="qizi" id="25"><img src="../picture/qizi_red_ma.png" height="100%"></div><div class="qizi" id="26"><img src="../picture/qizi_red_xiang.png" height="100%"></div><div class="qizi" id="27"><img src="../picture/qizi_red_shi.png" height="100%"></div><div class="qizi" id="28"><img src="../picture/qizi_red_shuai.png" height="100%"></div><div class="qizi" id="29"><img src="../picture/qizi_red_shi.png" height="100%"></div><div class="qizi" id="30"><img src="../picture/qizi_red_xiang.png" height="100%"></div><div class="qizi" id="31"><img src="../picture/qizi_red_ma.png" height="100%"></div><div class="qizi" id="32"><img src="../picture/qizi_red_che.png" height="100%"></div></body></html>

和属于我们的风景。一起吃早餐，

相关文章：

你感兴趣的文章：

标签云：