MyException - 我的异常网
当前位置:我的异常网» 网页设计 » 网页开发一个div相对于另外一个div的精确定位的有关

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

www.MyException.Cn  网友分享于:2015-05-25  浏览:0次
网页开发一个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>




 



文章评论

程序员必看的十大电影
程序员必看的十大电影
我是如何打败拖延症的
我是如何打败拖延症的
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
代码女神横空出世
代码女神横空出世
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
老程序员的下场
老程序员的下场
中美印日四国程序员比较
中美印日四国程序员比较
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
如何成为一名黑客
如何成为一名黑客
漫画:程序员的工作
漫画:程序员的工作
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
 程序员的样子
程序员的样子
每天工作4小时的程序员
每天工作4小时的程序员
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
Java程序员必看电影
Java程序员必看电影
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
旅行,写作,编程
旅行,写作,编程
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
程序员都该阅读的书
程序员都该阅读的书
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
总结2014中国互联网十大段子
总结2014中国互联网十大段子
程序员应该关注的一些事儿
程序员应该关注的一些事儿
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
10个调试和排错的小建议
10个调试和排错的小建议
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
鲜为人知的编程真相
鲜为人知的编程真相
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
程序员的鄙视链
程序员的鄙视链
那些争议最大的编程观点
那些争议最大的编程观点
一个程序员的时间管理
一个程序员的时间管理
我的丈夫是个程序员
我的丈夫是个程序员
程序员和编码员之间的区别
程序员和编码员之间的区别
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有