用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实现的使用方向键控制光标在table单元格中切换
Nov 17 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
Apr 11 Javascript
JSON格式化输出
Nov 10 Javascript
jQuery提示插件alertify使用指南
Apr 21 Javascript
使用jquery插件qrcode生成二维码
Oct 22 Javascript
Jquery日历插件制作简单日历
Oct 28 Javascript
12个非常实用的JavaScript小技巧【推荐】
May 18 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
Aug 13 Javascript
puppeteer库入门初探
Jan 09 Javascript
小试小程序云开发(小结)
Jun 06 Javascript
JS实现打字游戏
Dec 17 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
Feb 06 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
解决MySQL中文输出变成问号的问题
2008/06/05 PHP
php实现网站插件机制的方法
2009/11/10 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
PHP7新特性之抽象语法树(AST)带来的变化详解
2018/07/17 PHP
ASP中进行HTML数据及JS数据编码函数
2009/11/11 Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
2014/09/01 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
2020/12/24 Javascript
jQuery实现返回顶部效果的方法
2015/05/29 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
2016/03/05 Javascript
微信小程序 教程之引用
2016/10/18 Javascript
js中DOM事件绑定分析
2018/03/18 Javascript
JS基于开关思想实现的数组去重功能【案例】
2019/02/18 Javascript
基于JS开发微信网页录音功能的实例代码
2019/04/30 Javascript
JS回调函数简单易懂的入门实例分析
2019/09/29 Javascript
Python中使用wxPython开发的一个简易笔记本程序实例
2015/02/08 Python
介绍Python的Django框架中的静态资源管理器django-pipeline
2015/04/25 Python
Python使用CMD模块更优雅的运行脚本
2015/05/11 Python
Python脚本处理空格的方法
2016/08/08 Python
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
python之当你发现QTimer不能用时的解决方法
2019/06/21 Python
python 批量解压压缩文件的实例代码
2019/06/27 Python
Python如何优雅获取本机IP方法
2019/11/10 Python
Python常用库大全及简要说明
2020/01/17 Python
pycharm中导入模块错误时提示Try to run this command from the system terminal
2020/03/26 Python
vscode写python时的代码错误提醒和自动格式化的方法
2020/05/07 Python
你常见到的runtime exception
2016/09/05 面试题
数据库连接池的工作原理
2012/09/26 面试题
室内设计自我鉴定
2013/10/15 职场文书
QA工程师岗位职责
2013/11/20 职场文书
踏青活动策划方案
2014/08/19 职场文书
自主招生专家推荐信
2015/03/26 职场文书
初中开学典礼新闻稿
2015/07/17 职场文书
2016优秀毕业生个人事迹材料
2016/02/29 职场文书
2016年万圣节家长开放日活动总结
2016/04/05 职场文书
解决redis sentinel 频繁主备切换的问题
2021/04/12 Redis