谁能帮我实现DIV固定位置？在线等。百分相送！！！

wdmcsoft 2010-11-13 11:39:27

http://www.sxjxd.com/main.asp

我想实现页面居中，但页面里的两个灯笼，分辩率不同的时侯，显示的位置就不同，我用的是DIV实现的，谁有什么办法帮我实现固定位置？百分相送！！

实现立结贴！！！！

...全文

476 14 打赏收藏转发到动态举报

写回复

用AI写文章

14 条回复

切换为时间正序

请发表友善的回复…

发表回复

wdmcsoft 2010-11-13

打赏
举报

怎么获取？

lihaoran8577 2010-11-13

打赏
举报

[Quote=引用 4 楼 wdmcsoft 的回复:]
没搞明白。楼上好像没明白我的意思。　我的意思是我把页面内容居中了，但那个DIV灯笼就不在相应的位置了。
[/Quote]
你页面剧中后，获取放灯笼位置的坐标，然后赋值给灯笼的DIV的坐标！

wdmcsoft 2010-11-13

打赏
举报

没搞明白。楼上好像没明白我的意思。　我的意思是我把页面内容居中了，但那个DIV灯笼就不在相应的位置了。

wdmcsoft 2010-11-13

打赏
举报

我马上试一下

lihaoran8577 2010-11-13

打赏
举报

获取你DIV的坐标，然后将你的图片放入DIV中，页面加载时候将放置图片的DIV的坐标固定到DIV的坐标！
示例：



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE> New Document </TITLE>

  <META NAME="Generator" CONTENT="EditPlus">

  <META NAME="Author" CONTENT="">

  <META NAME="Keywords" CONTENT="">

  <META NAME="Description" CONTENT="">

  <style type="text/css">

 #text

 {

  margin:0px;!impportant;

  width:200px;

  height:100px;

  left:0px;

  top:0px;

  background-color:#ff0000;

  position:absolute;

  z-index:100;

  display:none;!impportant;

 }

 #id1,#id2,#id3,#id4

 {

	width:21px;

	height:20px;

	background-color:red;

	/*position:absolute;*/

 }

  </style>

<SCRIPT LANGUAGE="JavaScript">

<!--

function doit(evt,x,y){

evt = evt ? evt : (window.event ? window.event : null);

var obj = document.getElementById("text");

obj.style.left = x+10+"px";

obj.style.top = y+10+"px";

obj.style.display="block";

}

function show()

{

 var obj = document.getElementById("text");

 obj.style.display="none";

}

function diva(event,i)

{

	var div_el = document.getElementById("id"+i);//改下面4个DIV的ID名，来获取DIV的位置，动态改变DIV

	var div_left = div_el.offsetLeft;

	var div_top = div_el.offsetTop;

	/*alert(div_left+","+div_top);*/

	doit(event,div_left,div_top);

}

  -->

  </SCRIPT>

 </HEAD>





 <BODy>



  <a href="#" onmousemove="diva(event,1)" onmouseout="show()" id="id1">1</a>

  <a href="#" onmousemove="diva(event,2)" onmouseout="show()"  id="id2">2</a>

  <a href="#" onmousemove="diva(event,3)" onmouseout="show()" id="id3">3</a>

  <a href="#" onmousemove="diva(event,4)" onmouseout="show()" id="id4">4</a>

  <div id="text">里面放灯笼图片</div>

  

</map>

 </BODY>

</HTML>

wdmcsoft 2010-11-13

打赏
举报

没人能解决了？

hch126163 2010-11-13

打赏
举报

我给了楼主2个效果，我没明白楼主的 div 固定是什么概念？
如下面的还是 12楼的效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body{width:100%;height:100%}
</style>
</head>
<body>
<div style="width:900px; height:1000px; border:1px solid #ddd; padding:20px; margin:20px auto;"> 页面内容 </div>
<div id="divLeft" style=" position:absolute; z-index:10000; width:100px; height:200px; background-color:Red; right:auto;top:80px;"></div>
<div id="divRight" style=" position:absolute; z-index:10000; width:100px; height:200px; background-color:Red;left:auto;top:80px;"></div>
</body>
<script language="javascript" type="text/javascript">
(function(){
var w = window.screen.width;
document.getElementById('divLeft').style.left=(w- 1024)/2 + 80 +'px';
document.getElementById('divRight').style.right=(w- 1024)/2 + 80 +'px';
})();
</script>
</html>

hch126163 2010-11-13

打赏
举报

屏幕分辨率的高:
window.screen.height

屏幕分辨率的宽:
window.screen.width

设置div 绝对定位
左边div:
left = (window.screen.width - 1024)/2 + 80 +“px”;

右边div: 设置left:auto;

right = (window.screen.width - 1024)/2 + 80 +“px”;

hch126163 2010-11-13

打赏
举报

<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8"/>
<title>CSS Position Fixed for IE6</title>
<style>

* html,* html body {background-image:url(about:blank);background-attachment:fixed;}
* html .fixed-top {position:absolute;bottom:auto; top:expression(eval(document.documentElement.scrollTop +(document.documentElement.clientHeight-this.offsetHeight)/2 ));}
* html .fixed-right {position:absolute;right:0px;left:auto;}
* html .fixed-bottom {position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
* html .fixed-left {position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}
.fixed-bottom {
position:fixed;
left:0px;
bottom:20px;
background:aqua;
width:200px;
height:200px;
}
.fixed-right{
position:fixed;
right:0px;
left:auto;
top:200px;
top:expression(eval(document.documentElement.scrollTop +(document.documentElement.clientHeight-this.offsetHeight)/2 ));
background:red;
width:200px;
height:200px;
}
.fixed-top{
position:fixed;
top:0px;
left:0px;
background:blue;
width:200px;
height:200px;
}
</style>

</head>
<body>
<div style='height:2000px;width:500px;margin:10px auto; border:1px solid red;'></div>
<div class="fixed-top"></div>
<div class="fixed-bottom"></div>
<div class="fixed-right"></div>

</body>
</html>

fengqipiaobo 2010-11-13

打赏
举报

在外面用一个大的div，就是body下面

<body style="overflow-x: hidden">

<div style="position:relative;">

<script language="JavaScript1.2" src="images/javascript.js"></script>

这样的话，两个灯笼所在的层的浮动就会相对于添加的div而言，不管分辨率怎么样，只要div位置不变，灯笼也不会变的！

看了楼主的源码，顺序整理下会更好的！网站美工挺不错的！

lihaoran8577 2010-11-13

打赏
举报

[Quote=引用 8 楼 wdmcsoft 的回复:]
如果分辩率是1024*768　　　　还有的是1280*768

这两种分辩率该怎么获取坐标。
[/Quote]
只要你div存在
var div_left = obj.offsetLeft;
var div_top = obj.offsetTop;

就可以获取到你DIV的坐标！