用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实现轮显新闻标题链接
Aug 13 Javascript
JS实现div内部的文字或图片自动循环滚动代码
Apr 19 Javascript
javascript与jquery中跳出循环的区别总结
Nov 04 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
Jun 05 Javascript
详解JavaScript中的客户端消息框架设计原理
Jun 24 Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
微信小程序 页面滑动事件的实例详解
Oct 12 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
Jul 27 Javascript
浅谈webpack devtool里的7种SourceMap模式
Jan 14 Javascript
Vue 实例事件简单示例
Sep 19 Javascript
浅析JavaScript 函数防抖和节流
Jul 13 Javascript
vue接口请求加密实例
Aug 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使用session二维数组实例
2014/11/06 PHP
php获取文件名后缀常用方法小结
2015/02/24 PHP
thinkPHP3.2简单实现文件上传的方法
2016/05/16 PHP
详解PHP函数 strip_tags 处理字符串缺陷bug
2017/06/11 PHP
60行js代码实现俄罗斯方块
2015/03/31 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
2015/05/11 Javascript
jquery实现树形菜单完整代码
2015/12/29 Javascript
jQuery Validation Plugin验证插件手动验证
2016/01/26 Javascript
分享10个优化代码的CSS和JavaScript工具
2016/05/11 Javascript
Node.js检测端口(port)是否被占用的简单示例
2016/09/29 Javascript
Angular.js去除页面中显示的空行方法示例
2017/03/30 Javascript
关于angular js_$watch监控属性和对象详解
2017/04/24 Javascript
javascript实现非常简单的小数取整功能示例
2017/06/13 Javascript
Vue实现web分页组件详解
2017/11/28 Javascript
Vue实现本地购物车功能
2018/12/05 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
2020/01/06 Javascript
NodeJS模块Buffer原理及使用方法解析
2020/11/11 NodeJs
Python常见文件操作的函数示例代码
2011/11/15 Python
Python标准库urllib2的一些使用细节总结
2015/03/16 Python
numpy.transpose对三维数组的转置方法
2018/04/17 Python
python实现在IDLE中输入多行的方法
2018/04/19 Python
python 把文件中的每一行以数组的元素放入数组中的方法
2018/04/29 Python
详解在Python中以绝对路径或者相对路径导入文件的方法
2019/08/30 Python
python getpass实现密文实例详解
2019/09/24 Python
python实现简易淘宝购物
2019/11/22 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
python GUI库图形界面开发之PyQt5信号与槽机制、自定义信号基础介绍
2020/02/25 Python
优秀党员转正的自我评价
2013/10/06 职场文书
大学生职业生涯规划书的基本内容
2014/01/06 职场文书
革命先烈的英雄事迹材料
2014/02/15 职场文书
《在家里》教后反思
2014/03/01 职场文书
2014年纪委工作总结
2014/12/05 职场文书
2014年药品销售工作总结
2014/12/16 职场文书
Python提取PDF指定内容并生成新文件
2021/06/09 Python
HTML怎么设置下划线?html文字加下划线方法
2021/12/06 HTML / CSS
PostgreSQL逻辑复制解密原理解析
2022/09/23 PostgreSQL