用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 相关文章推荐
jQuery div层的放大与缩小简单实现代码
Mar 28 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
May 15 Javascript
indexOf 和 lastIndexOf 使用示例介绍
Sep 02 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
Sep 01 Javascript
JavaScript实现简单的星星评分效果
May 18 Javascript
js 提取某()特殊字符串长度的实例
Dec 06 Javascript
vue.js的computed,filter,get,set的用法及区别详解
Mar 08 Javascript
vue 中动态绑定class 和 style的方法代码详解
Jun 01 Javascript
实例讲解JavaScript预编译流程
Jan 24 Javascript
vue 中 beforeRouteEnter 死循环的问题
Apr 23 Javascript
详解vue-video-player使用心得(兼容m3u8)
Aug 23 Javascript
node.js使用yargs处理命令行参数操作示例
Feb 11 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中cookie的作用域
2008/03/27 PHP
PHP 通过Socket收发十六进制数据的实现代码
2013/08/16 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
textContent在Firefox下与innerText等效的属性
2007/05/12 Javascript
cookie.js 加载顺序问题怎么才有效
2013/07/31 Javascript
js 三级关联菜单效果实例
2013/08/13 Javascript
javascript自定义滚动条实现代码
2020/04/20 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
使用BootStrap实现标签切换原理解析
2017/03/14 Javascript
jQuery中用on绑定事件时需注意的事项
2017/03/19 Javascript
Vue 过渡实现轮播图效果
2017/03/27 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
微信小程序中使用自定义图标(阿里icon)的方法
2018/08/20 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
2018/08/25 Javascript
微信小程序时间选择插件使用详解
2018/12/28 Javascript
vue自定义正在加载动画的例子
2019/11/14 Javascript
jquery制作的移动端购物车效果完整示例
2020/02/24 jQuery
原生JS生成指定位数的验证码
2020/10/28 Javascript
Python中无限元素列表的实现方法
2014/08/18 Python
Python中Continue语句的用法的举例详解
2015/05/14 Python
Python实现学生成绩管理系统
2020/04/05 Python
python实现百度OCR图片识别过程解析
2020/01/17 Python
pytorch加载语音类自定义数据集的方法教程
2020/11/10 Python
JINS眼镜官方网站:日本最大的眼镜邮购
2016/10/14 全球购物
Cole Haan官方网站:美国时尚潮流品牌
2017/12/06 全球购物
印尼最大的网上书店:Gramedia.com
2018/09/13 全球购物
财务主管的岗位职责
2013/12/30 职场文书
《爱如茉莉》教后反思
2014/04/12 职场文书
艺人经纪人岗位职责
2014/04/15 职场文书
乡镇组织委员个人整改措施
2014/09/16 职场文书
官僚主义现象查摆问题整改措施
2014/10/04 职场文书
乱丢垃圾袋检讨书
2014/10/08 职场文书
综合实践活动报告
2015/02/05 职场文书
2015年度房地产工作总结
2015/04/09 职场文书
企业文化学习心得体会
2016/01/21 职场文书
5种 JavaScript 方式实现数组扁平化
2021/10/05 Javascript