用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 相关文章推荐
DHTML 中的绝对定位
Nov 26 Javascript
prototype 学习笔记整理
Jul 17 Javascript
jquery中this的使用说明
Sep 06 Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
Nov 06 Javascript
javascript学习笔记(三)BOM和DOM详解
Sep 30 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
Mar 05 Javascript
JS访问SWF的函数用法实例
Jul 01 Javascript
JS中Eval解析JSON字符串的一个小问题
Feb 21 Javascript
require简单实现单页应用程序(SPA)
Jul 12 Javascript
javascript常用经典算法详解
Jan 11 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
Aug 20 Javascript
详解JavaScript的this指向和绑定
Sep 08 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 多线程上下文中安全写文件实现代码
2009/12/28 PHP
php获取英文姓名首字母的方法
2015/07/13 PHP
PHP页面跳转实现延时跳转的方法
2016/12/10 PHP
PHP 验证身份证是否合法的函数
2017/02/09 PHP
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
给artDialog 5.02 增加ajax get功能详细介绍
2012/11/13 Javascript
javascript jscroll模拟html元素滚动条
2012/12/18 Javascript
提高jQuery性能的十个诀窍
2013/11/14 Javascript
js数组中如何随机取出一个值
2014/06/13 Javascript
jQuery获取iframe的document对象的方法
2014/10/10 Javascript
JAVA四种基本排序方法实例总结
2015/07/24 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
node.js路径处理方法以及绝对路径详解
2021/03/04 Javascript
浅析BootStrap Treeview的简单使用
2016/10/12 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
2017/01/19 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
2017/09/07 Javascript
bootstrap响应式工具使用详解
2017/11/29 Javascript
基于iScroll实现内容滚动效果
2018/03/21 Javascript
element ui table(表格)实现点击一行展开功能
2018/12/04 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
jquery添加div实现消息聊天框
2020/02/08 jQuery
nuxt.js服务端渲染中axios和proxy代理的配置操作
2020/11/06 Javascript
python 通过类中一个方法获取另一个方法变量的实例
2019/01/22 Python
基于python实现百度翻译功能
2019/05/09 Python
Python @property装饰器原理解析
2020/01/22 Python
PIL包中Image模块的convert()函数的具体使用
2020/02/26 Python
超级实用的8个Python列表技巧
2020/08/24 Python
大学生就业自我推荐信
2014/05/10 职场文书
教育基金募捐倡议书
2014/05/14 职场文书
英语课前三分钟演讲稿
2014/08/19 职场文书
个人授权委托书格式
2014/08/30 职场文书
离婚协议书格式
2014/11/21 职场文书
大学生社会实践感想
2015/08/11 职场文书
古见同学有交流障碍症 第二季宣传CM公开播出
2022/04/11 日漫