快捷導(dǎo)航

用js來(lái)定義瀏覽器中一個(gè)左右浮動(dòng)元素相對(duì)于頁(yè)面主體寬度的位置的函數(shù)

更新時(shí)間：2012年01月21日 19:26:52 作者：

用js來(lái)定義瀏覽器中一個(gè)左右浮動(dòng)元素相對(duì)于頁(yè)面主體寬度的位置的函數(shù) 函數(shù)的參數(shù)：elem元素、頁(yè)面主體寬度(如：990、950寬)、elem與頁(yè)面主體DIV的左邊距

首先這個(gè)元素position為fixed
top為(clientHeight-elem.offsetHeight)/2(即元素在瀏覽器的中間,這個(gè)是固定的)
left為(clientWidht-主體寬度)/2+主體寬度+左邊距，左邊距可以設(shè)為正數(shù)，也可以為負(fù)數(shù)，如果為負(fù)數(shù)時(shí)的絕對(duì)值等于主體寬度+elem.offsetWidht,那么元素就剛好浮動(dòng)在頁(yè)面主體的左邊，設(shè)置為0時(shí)，剛好浮動(dòng)在頁(yè)面主體的右邊
但是萬(wàn)惡的ie6不支持css中fixed屬性，好在ie6可以通過(guò)expresion表達(dá)式來(lái)解決,萬(wàn)事大吉
具體看代碼：

復(fù)制代碼代碼如下:

 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="gb2312" /> 
<title>左右浮動(dòng)元素</title> 
<style type="text/css"> 
html{_background-image:url(about:blank);_background-attachment:fixed;/*針對(duì)ie6，解決窗口滾動(dòng)時(shí)的抖動(dòng)*/} 
body{margin:0;padding:0;} 
.box-wrap{width:990px;margin:0 auto;height:5000px;background:#999;} 
.pos-id{width:50px;height:200px;line-height:200px;background:#F00; 
/*針對(duì)ie6*/ 
_position:absolute; 
_bottom:auto; 
_top:expression(eval(document.documentElement.scrollTop+(document.documentElement.clientHeight-this.offsetHeight)/2- 
(parseInt(this.currentStyle.marginTop)||0)-(parseInt(this.currentStyle.marginBottom)||0))); 
/*其中的_top為瀏覽器的垂直居中線上,left在js定義中*/ 
} 
.pos-id a{color:#FFF;font-size:12px;} 
</style> 
</head> 
<body> 
<div class="box-wrap" id="box-wrap"> 
<div class="pos-id" id="pos-id"> 
<a href="http://m.fzitv.net/" title="腳本之家" target="_blank">腳本之家</a> 
</div> 
</div> 
<script language="javascript"> 
window.onload = function(){ 
/* 
---------------------------------- 
定義一個(gè)瀏覽器左右浮動(dòng)元素相對(duì)于頁(yè)面主體寬度的位置的函數(shù) 
---------------------------------- 
*/ 
function setScrollDivPos(elemId_str,main_width,m_left){ 
//自定義一個(gè)獲取元素的函數(shù) 
$ = function(id){return document.getElementById(id);}; 
//獲取瀏覽器在標(biāo)準(zhǔn)模式和混雜模式的視口大小 
var c_width = document.documentElement.clientWidth || document.body.clientWidth; 
var c_height = document.documentElement.clientHeight || document.body.clientHeight; 
//獲取瀏覽器滾動(dòng)時(shí)頂部被隱藏的像素大小 
//var s_top = document.documentElement.scrollTop || document.body.scrollTop; 
//獲取瀏覽器視口寬度減去頁(yè)面主題寬度的一半 
var half_width = (c_width - main_width)/2; 
//獲取瀏覽器視口高度的一半 
var half_height = c_height/2; 
//獲取元素的高度 
var elem_height = $(elemId_str).offsetHeight; 
//獲取元素相對(duì)于頁(yè)面主體的(左、上)相對(duì)位置 
var pos_left = main_width + half_width + m_left + "px"; 
var pos_top = (c_height - elem_height)/2 + "px"; 
//獲取瀏覽器頂部的滾動(dòng)大小 
//var s_top = document.documentElement.scrollTop || document.body.scrollTop; 
//對(duì)元素進(jìn)行定位布局 
if(window.XMLHttpRequest){ 
$(elemId_str).style.cssText = 'position:fixed;top:' + pos_top + ';left:' + pos_left + ';'; 
}else{ 
$(elemId_str).style.cssText = ';left:' + pos_left + ';'; 
} 
} 
//定義id為pos-id的元素 在頁(yè)面主題寬度為990px的左側(cè) 
//setScrollDivPos("pos-id",990,-1040); 
//定義id為pos-id的元素 在頁(yè)面主題寬度為990px的右側(cè) 
setScrollDivPos("pos-id",990,0); 
} 
</script> 
</body> 
</html> 