用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数

更新时间：2012年01月21日 19:26:52 作者：

用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数函数的参数：elem元素、页面主体宽度(如：990、950宽)、elem与页面主体DIV的左边距

首先这个元素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="https://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> 

您可能感兴趣的文章:

左右浮动

JavaScript变速动画函数封装添加任意多个属性
这篇文章主要介绍了JavaScript变速动画函数封装添加任意多个属性 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-04-04
bootstrap table实现双击可编辑、添加、删除行功能
这篇文章主要为大家详细介绍了bootstrap table实现双击可编辑、添加、删除行功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-09-09
JS ES6中setTimeout函数的执行上下文示例
这篇文章主要给大家介绍了关于JS ES6中setTimeout函数的执行上下文的相关资料，文中给出了详细的介绍和示例代码供大家参考学习，需要的朋友们下面来一起看看吧。
2017-04-04
瀑布流布局代码一例
提起瀑布流布局想必大家并不陌生吧，其实呢？原理也就那样，下面有个小例子，与大家分享
2014-04-04
简述JS控制台的使用
本文给大家介绍了js控制台的使用，非常不错，具有一定的参考借鉴借鉴价值，需要的朋友参考下吧
2018-07-07
javascript父、子页面交互技巧总结
存放子页面可以是iframe,又可以是frameset，本例介绍javascript父、子页面交互技巧,需要的朋友可以参考下
2014-08-08
JavaScript实现HSL拾色器
这篇文章主要为大家详细介绍了JavaScript实现HSL拾色器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-05-05
关于JS解构的5种有趣用法
这篇文章主要给大家介绍了关于JS解构的5种有趣用法，文中通过示例代码介绍的非常详细，对大家学习或者使用JS解构具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-09-09
jquery操作ul的一些操作笔记整理(干货)
下面小编就为大家带来一篇jquery操作ul的一些操作笔记整理(干货)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
js 模块化CommonJS AMD UMD CMD ES6规范详解
这篇文章主要为大家介绍了js 模块化CommonJS AMD UMD CMD ES6规范详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04