首頁 > 開發者 > JavaScript

用js來定義瀏覽器中一個左右浮動元素相對於頁面主體寬度的位置的函數

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

首先這個元素position為fixed
top為(clientHeight-elem.offsetHeight)/2(即元素在瀏覽器的中間,這個是固定的)
left為(clientWidht-主體寬度)/2+主體寬度+左邊距，左邊距可以設為正數，也可以為負數，如果為負數時的絕對值 等於 主體寬度+elem.offsetWidht,那麼元素就剛好浮動在頁面主體的左邊，設定為0時，剛好浮動在頁面主體的右邊
但是萬惡的ie6不支援css中fixed屬性，好在ie6可以通過expresion運算式來解決,萬事大吉
具體看代碼：
複製代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>左右浮動元素</title>
<style type="text/css">
html{_background-image:url(about:blank);_background-attachment:fixed;/*針對ie6，解決視窗滾動時的抖動*/}
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;
/*針對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://www.jb51.net/" title="指令碼之家" target="_blank">指令碼之家</a>
</div>
</div>
<script language="javascript">
window.onload = function(){
/*
----------------------------------
定義一個瀏覽器左右浮動元素相對於頁面主體寬度的位置的函數
----------------------------------
*/
function setScrollDivPos(elemId_str,main_width,m_left){
//自訂一個擷取元素的函數
$ = function(id){return document.getElementById(id);};
//擷取瀏覽器在標準模式和混雜模式的視口大小
var c_width = document.documentElement.clientWidth || document.body.clientWidth;
var c_height = document.documentElement.clientHeight || document.body.clientHeight;
//擷取瀏覽器滾動時頂部被隱藏的像素大小
//var s_top = document.documentElement.scrollTop || document.body.scrollTop;
//擷取瀏覽器視口寬度減去頁面主題寬度的一半
var half_width = (c_width - main_width)/2;
//擷取瀏覽器視口高度的一半
var half_height = c_height/2;
//擷取元素的高度
var elem_height = $(elemId_str).offsetHeight;
//擷取元素相對於頁面主體的(左、上)相對位置
var pos_left = main_width + half_width + m_left + "px";
var pos_top = (c_height - elem_height)/2 + "px";
//擷取瀏覽器頂部的滾動大小
//var s_top = document.documentElement.scrollTop || document.body.scrollTop;
//對元素進行定位布局
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的元素 在頁面主題寬度為990px的左側
//setScrollDivPos("pos-id",990,-1040);
//定義id為pos-id的元素 在頁面主題寬度為990px的右側
setScrollDivPos("pos-id",990,0);
}
</script>
</body>
</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More