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

在网页开发的过程中，我们在布局上基本上都会采用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>
时间： 2024-10-07 09:57:19

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

网页开发笔记【一】创建一个半透明的页面

近来正在温习网页制作,系列<网页开发笔记>记录本人在解决网页开发过程中遇到的问题以及解决方案. 半透明的页面在网页开发中使用的比较广泛,尤其在web app中,这种设计使用的地方更为广泛,本文记录这种半透明的页面的开发方法. 半透明页面常用于用户注册,这时候弹出一个页面能在不离开当前页面的情况下完成注册. 如百度的登陆界面所示. 我的处理方法如下: 首先在页面写一个div,这个div平时display设置为none,当需要的时候设置为display:block; 这个div(设其id为popu

微信公众平台网页开发实战--1.微信分享一个网页到朋友圈

对微信的JSSDK进行封装一下,创建一份类似的文件结构,增加index.html与shareApi.js文件,结构如图3.3所示. 图3.3  3.2节文件结构 另外,提醒读者一下,wxJSSDK.js文件的JSSDK环境配置中,需要更改一下配置参数,代码如下: 01 jsApiList: [ // 其他代码略 02 "onMenuShareTimeline", 03 "onMenuShareAppMessage", 04 "onMenuShareQQ&q

一个简单的模板了解css+div网页布局

直接附上最终效果图: index.html内容: <html> <!--20170730 soulsjie--> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>div+css页面布局综合练习</title> <link rel="stylesheet&quo

Div里面载入另一个页面的实现(取代框架)（AJax）

随着框架越来越不火了,HTML5就不对框架支持了,iframe也只有url了,Div就担当了此大任 DIV+CSS在页面部局确实也很让人满意,使用也更方便 今天突然遇到一个问题,那就是需要导入另一个页面显示在当前页的Div里面 我当然可以用iFrame啥的,不过那不是我想要的方法 在网上查了半天,方法也很多,不过有不满意的地方,因为多数都会用JQuery 呆会在下部分会给出jQuery的实现 而且因为要导入的页面还有一些特效,而不是单纯的数据,例如,我导过来的页面样式都要保持! 我要实现的是教你

[转]Div里面载入另一个页面的实现(取代框架)（AJax）

原文地址:http://blog.csdn.net/shaobingj126/article/details/23676759 随着框架越来越不火了,HTML5就不对框架支持了,iframe也只有url了,Div就担当了此大任 DIV+CSS在页面部局确实也很让人满意,使用也更方便 今天突然遇到一个问题,那就是需要导入另一个页面显示在当前页的Div里面 我当然可以用iFrame啥的,不过那不是我想要的方法 在网上查了半天,方法也很多,不过有不满意的地方,因为多数都会用JQuery 呆会在下部分会

Div里面载入另一个页面的实现(取代框架)（AJax）（转）

随着框架越来越不火了,HTML5就不对框架支持了,iframe也只有url了,Div就担当了此大任 DIV+CSS在页面部局确实也很让人满意,使用也更方便 今天突然遇到一个问题,那就是需要导入另一个页面显示在当前页的Div里面 我当然可以用iFrame啥的,不过那不是我想要的方法 在网上查了半天,方法也很多,不过有不满意的地方,因为多数都会用JQuery 呆会在下部分会给出jQuery的实现 而且因为要导入的页面还有一些特效,而不是单纯的数据,例如,我导过来的页面样式都要保持! 我要实现的是教你

Cocos2dx 3.0开发环境搭建--Eclipse上构建一个Android项目

一.前言: 本篇主要介绍Cocos2d-x 3.0的一些基础内容,以及在Eclipse上上编译我们的Cocos2d-x项目,成功把Helloworld运行起来了.看完本篇博客之后,你就会知道Cocos2d-x 3.0竟然发生了如此大的变化,变得如此简单,环境搭建.项目创建.编译的方式更加人性化了. 二.环境准备: 1.下载ADT Bundle(Eclipse捆绑了SDK和ADT),或者是Eclipse安装了ADT插件. 2.安装JDK.NDK.Ant .Python,然后配置环境. 3.Coco

创业的时候只能专心致志做好一件事。什么叫“一件事”？只能开发一个游戏，只能做一个产品

著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:王统伟链接:http://www.zhihu.com/question/19550531/answer/15183706来源:知乎 这是我在商界招商网看到天使投资人曾李青(原腾讯公司五位创始人之一)对早期创业公司的看法 ,觉得对你蛮有帮助的,你可以参考下!曾李青:早期创业公司九种死法第一,跨行业创业 比如原来做游戏的人要做电商,原来做互联网社区的要做游戏.现在的互联网环境下,这种跨行业创业失败概率都会比较高. 在演讲中,他

iOS开发UI篇—事件处理（完成一个简单的涂鸦板）

iOS开发UI篇-事件处理(实现一个简单的涂鸦板) 一.说明 该程序使用事件处理机制和绘图完成了一个简单的涂鸦板应用,使用鼠标在涂鸦板内拖动即可进行涂鸦,点击保存到相册按钮,可以把完成的涂鸦保存到手机的相册中,点击回退按钮可以向后退回一步,点击清空可以让涂鸦板清空. 文件结构和界面搭建: 二.代码示例 YYViewController.m文件 1 // 2 // YYViewController.m 3 // 02-画板程序 4 // 5 // Created by apple on 14-6-