使用JQuery使Div居中
作者:admin 日期:2015-05-29
Div居中是一个比较常见的需求。下面介绍一种使用JQuery使Div居中的方法
先假设有这样一个Div，<div id="d">test</div>
首先是要把需要居中的Div进行绝对定位，如：
<style type="text/css">
#d {
position: absolute;
width: 500;
height: 300;
border: 1px solid red;
}
</style>
有了这样的样式定义之后就是使其居中的js代码了。
JavaScript代码
- var obj = $("#d");//获得相应的Div对象
- var x = ($(window).width()-500)/2;//使用$(window).width()获得显示器的宽，并算出对应的Div离左边的距离
- var y = ($(window).height()-300)/2;//使用$(window).height()获得显示器的高，并算出相应的Div离上边的距离
- obj.css("top",y).css("left",x);
上面这段代码可以在页面一加载完就执行。
改进后的代码：
JavaScript代码
- $(document).ready(function(){
- middle();
- });
- $(window).resize(function(){
- middle();
- });
- function middle(){
- var obj = $("#mainbg");//获得相应的Div对象
- var x = ($(window).width()-500)/2;//使用$(window).width()获得显示器的宽，并算出对应的Div离左边的距离
- var y = ($(window).height()-300)/2;//使用$(window).height()获得显示器的高，并算出相应的Div离上边的距离
- obj.css("top",y).css("left",x);
- }
上面的代码实现窗口大小变化后始终居中。
上一篇: css背景颜色渐变
下一篇: 网页宽度为多少才可以打印出A4纸呢
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: javascript jquery 
相关日志:
评论: 0 | 引用: 0 | 查看次数: 2078
发表评论
广告位
