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


Posted in Javascript onJanuary 21, 2012

首先这个元素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://3water.com/" 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 学习笔记(一)DOM基本操作
Apr 08 Javascript
js网页版计算器的简单实现
Jul 02 Javascript
js获取下拉列表的值和元素个数示例
May 07 Javascript
jquery读取xml文件实现省市县三级联动的方法
May 29 Javascript
详解JavaScript逻辑Not运算符
Dec 04 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
Nov 01 Javascript
遍历json 对象的属性并且动态添加属性的实现
Dec 02 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
Angular中$state.go页面跳转并传递参数的方法
May 09 Javascript
JS实现全屏预览F11功能的示例代码
Jul 23 Javascript
Node.js的进程管理的深入理解
Jan 09 Javascript
浅谈小程序globalData的那些事儿
Nov 01 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Jan 21 #Javascript
面向对象的Javascript之一(初识Javascript)
Jan 20 #Javascript
MooBox 基于Mootools的对话框插件
Jan 20 #Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
Jan 20 #Javascript
json的前台操作和后台操作实现代码
Jan 20 #Javascript
Prototype源码浅析 Enumerable部分(二)
Jan 18 #Javascript
JS中的public和private对象,即static修饰符
Jan 18 #Javascript
You might like
配置最新的PHP加MYSQL服务器
2006/10/09 PHP
php表单转换textarea换行符的方法
2010/09/10 PHP
ThinkPHP令牌验证实例
2014/06/18 PHP
php输出指定时间以前时间格式的方法
2015/03/21 PHP
PHP微信支付开发实例
2016/06/22 PHP
php常用字符函数实例小结
2016/12/29 PHP
Yii2中添加全局函数的方法分析
2017/05/04 PHP
PHP 多任务秒级定时器的实现方法
2018/05/13 PHP
关于PHP中interface的用处详解
2020/07/26 PHP
Flash+XML滚动新闻代码 无图片 附源码下载
2007/11/22 Javascript
基于javascript实现的搜索时自动提示功能
2014/12/26 Javascript
jQuery实现的简洁下拉菜单导航效果代码
2015/08/26 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
2015/09/06 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
2016/05/09 Javascript
javascript事件处理模型实例说明
2016/05/31 Javascript
AngularJS中$http服务常用的应用及参数
2016/08/22 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
2017/02/24 Javascript
整理关于Bootstrap导航的慕课笔记
2017/03/29 Javascript
vue+element实现批量删除功能的示例
2018/02/28 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
2018/10/09 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
2018/10/25 Javascript
深入浅析javascript函数中with
2018/10/28 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
2019/02/20 jQuery
Vue.js构建你的第一个包并在NPM上发布的方法步骤
2019/05/01 Javascript
nodejs 递归拷贝、读取目录下所有文件和目录
2019/07/18 NodeJs
[49:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 KG VS TNC
2018/03/31 DOTA
Python实现给文件添加内容及得到文件信息的方法
2015/05/28 Python
解决Python的str强转int时遇到的问题
2018/04/09 Python
python对象与json相互转换的方法
2019/05/07 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
python如何删除文件、目录
2020/06/23 Python
美国定制钻石订婚戒指:Ritani
2017/12/08 全球购物
财务人员担保书
2014/05/13 职场文书
房地产项目合作意向书
2015/05/08 职场文书
Python 数据可视化之Matplotlib详解
2021/11/02 Python
Apache Pulsar集群搭建部署详细过程
2022/02/12 Servers