码迷，mamicode.com
首页 > Web开发 > 详细

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

时间：2015-05-23 15:35:57      阅读：142      评论：0      收藏：0      [点我收藏+]

标签：jsp   布局   界面   浏览器   网格   

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

技术分享


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

技术分享

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

<%@ 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{<!--这个必须写，不然的话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;
//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;
	 object.style.width=qipan_w;
	 object.style.left=(width-qipan_w)/2;
	 object.style.position="absolute";
	 }
</script>
</head>
<body onload="start();" >
<div id="background">
   <img src="../picture/final_qipan.png" height="100%">
</div>
</body>
</html>
我这里只强调两点，一个就是关于body和html的设置我已经在注释里面说了，还有就是我的棋盘的宽度的设置，因为我们一个棋盘，一定要保证我们的格子是正方形啊，所以高度确定之后就按照原始图片长宽的百分比来计算宽度就是我那个代码写的那样qipan_w=height/921*1134;我的图片的大小是（921*1134）。

然后我们来解决新的问题，如何让我的将，位于棋盘的相应位置呢？我使用的是如下的方法，首先把我们的棋盘图片在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>




 



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

标签：jsp   布局   界面   浏览器   网格   

原文地址：http://blog.csdn.net/nijiayy/article/details/45934205
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！