用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数

首先这个元素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="http://www.jb51.net/" 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>

赞 (0)

相关推荐

  • js 获取页面高度和宽度兼容 ie firefox chrome等

    复制代码 代码如下: <script> //得到页面高度 var yScroll = (document.documentElement.scrollHeight >document.documentElement.clientHeight) ? document.documentElement.scrollHeight : document.documentElement.clientHeight; alert(yScroll) //得到页面宽度 var xScroll=(docume

  • 手机屏幕尺寸测试——手机的实际显示页面的宽度

    手机站开发遇到一些问题,设计页面使用多大的尺寸?为此做了一些研究,除IPhone特殊一些外,目前市面上的安卓系统的实际显示页面的宽度,都是360px. 手机型号 竖屏宽度 IPhone 5 320px IPhone 6 375px IPhone 6 Plus 414px Nexus 4 384px Android(大多数) 360px 前两年,安卓的分辨率多数还是240px 或 320px,现在是360px,为了向下兼容,向上也兼容,最终将 360px 定为设计的尺寸,后期可以使用CSS3 Me

  • 手机端页面rem宽度自适应脚本

    什么是rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对大小就可以实现自适应了,就不用什么媒体查询那些的. 我们的设计图往往宽度是640或者其他尺寸的,不过我建议是用这个尺寸,以640为基准,以小到大,实现自适应,下面实现的比例为1rem=40px(640宽度). 为什么这样搞? 这样一套代码就搞定手机端尺寸自适应,不需要媒体查询,而且利用Sass和Less能够给我们节约更多的时间,以及

  • 准确获得页面、窗口高度及宽度的JS

    function getPageSize(){ var xScroll, yScroll; if (window.innerHeight && window.scrollMaxY) { xScroll = document.body.scrollWidth; yScroll = window.innerHeight + window.scrollMaxY; } else if (document.body.scrollHeight > document.body.offsetHeig

  • jquery 得到当前页面高度和宽度的两个函数

    复制代码 代码如下: //======需引用jquery框架======// //返回当前页面高度 function pageHeight(){ if($.browser.msie){ return document.compatMode == "CSS1Compat"? document.documentElement.clientHeight : document.body.clientHeight; }else{ return self.innerHeight; } }; //返

  • Jqurey实现类似EasyUI的页面布局可改变左右的宽度

    Jqurey实现类似EasyUI的页面布局可改变左右的宽度

    截图如下:(可通过移动中间蓝色的条,来改变左右两边div的宽度) 具体实现代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default10.aspx.cs" Inherits="Default10" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//

  • jQuery获取页面及个元素高度、宽度的总结——超实用

    下面把jQuery获取页面及个元素高度.宽度的方法汇总,分享给大家. 获取浏览器显示区域(可视区域)的高度 : 复制代码 代码如下: $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : 复制代码 代码如下: $(window).width(); 获取页面的文档高度 复制代码 代码如下: $(document).height(); 获取页面的文档宽度 : 复制代码 代码如下: $(document).width(); 浏览器当前窗口文档body的高度: 复制代码 代码

  • js获得页面的高度和宽度的方法

    今天在做一个弹出dialog时,遇用到了取父页面的宽度和高度的方法. 尝试了几种方式,比如document.body.clientWidth,window.screen.width,document.body.scrollWidth等方法之后,发现都不是我想要的结果,后来发现了一个高效的方法,立刻大家分享之: 在需要取高度和宽度的地方加断点调试[debugger],然后在监控页面里面输入document.body,查看所有body的属性看看哪个结果是自己需要的,如果没有适合还可以输入window

  • js获取input长度并根据页面宽度设置其大小及居中对齐

    1. js获取页面宽度高度及屏幕分辨率 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight 网页被卷去

  • jquery实现在页面加载完毕后获取图片高度或宽度

    日前,本技术屌丝又遇到了一个很有意思的问题,应项目要求,需要在页面加载完毕之后获取图片的高度,以此来调整图片上面的覆盖层相对于图片顶端的位置. 但在jquery(function(){ /*XXXXXX*/});里面写了之后发现不是很理想,因为当jquery准备就绪的时候,此时图片绝大部分情况下都没加载完毕,这可急坏了本屌丝~~~T~T 本屌丝就想啊,要是jquery有个跟js的onload()的方法多好啊,擦~真是天上掉下个大狗屎,恰巧砸到本屌丝~~在网上搜了下,还真有这么个方法,写法如下:

随机推荐