用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 相关文章推荐
一组JS创建和操作表格的函数集合
May 07 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
Nov 14 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
Jan 23 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
Nov 17 Javascript
详解JavaScript中的事件流和事件处理程序
May 20 Javascript
浅析JavaScript 箭头函数 generator Date JSON
May 23 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
Nov 25 Javascript
vue、react等单页面项目应该这样子部署到服务器
Jan 03 Javascript
详解ES6中的代理模式——Proxy
Jan 08 Javascript
js正则表达式校验指定字符串的方法
Jul 23 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
Dec 17 Javascript
vue路由权限校验功能的实现代码
Jun 07 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简洁函数小结
2011/08/12 PHP
可以保证单词完整性的PHP英文字符串截取代码分享
2014/07/15 PHP
PHP实现无限极分类图文教程
2014/11/25 PHP
php array_key_exists() 与 isset() 的区别
2016/10/24 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
Mootools 1.2教程 类(一)
2009/09/15 Javascript
javascript object array方法使用详解
2012/12/03 Javascript
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
获得Javascript对象属性个数的示例代码
2013/11/21 Javascript
IE8中使用javascript动态加载CSS的解决方法
2014/06/17 Javascript
Node.js中的缓冲与流模块详细介绍
2015/02/11 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
2015/07/17 Javascript
js实现移动端微信页面禁止字体放大
2017/02/16 Javascript
微信小程序使用navigateTo数据传递的实例
2017/09/26 Javascript
详解html-webpack-plugin用法全解
2018/01/22 Javascript
详解nodeJs文件系统(fs)与流(stream)
2018/01/24 NodeJs
详解node.js的http模块实例演示
2018/07/12 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
全网小程序接口请求封装实例代码
2020/11/06 Javascript
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
[47:20]DAC2018 4.4 淘汰赛 Optic vs Mineski 第一场
2018/04/05 DOTA
Python处理JSON数据并生成条形图
2016/08/05 Python
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
Python 字符串与二进制串的相互转换示例
2018/07/23 Python
python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例
2020/03/09 Python
在Pycharm中安装Pandas库方法(简单易懂)
2021/02/20 Python
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
说出一些常用的类,包,接口
2014/09/22 面试题
业务主管岗位职责
2013/11/20 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
在职证明书范本(2014新版)
2014/09/25 职场文书
人大代表选举标语
2014/10/07 职场文书
教师群众路线教育实践活动学习笔记
2014/11/05 职场文书
同学会邀请函模板
2015/01/30 职场文书
分享一些Java的常用工具
2021/06/11 Java/Android