JS实现-DIV自动居中代码

v2-f1af7c52561fdfa957dff3d1f3244591_hd.jpg

        其实想让整个DIV盒子在页面实现自动居中非常简单,只需要一小段JS代码代码就可以实现。有时候我们做页面效果也好,做程序功能的开发也好。只要思路理清楚了,相信做起来会非常的得心应手。

        下面就跟大家一起简单分析下JS是如何实现让DIV盒子,在页面自动居中,并且随着页面的变动,也能居中。
思路:
      一、首先我们的DIV盒子模型,一般是绝对定位于浏览器的,那么首先我们可以先获取整个页面(浏览器的可视区)的宽度、高度。
      二、然后获取自身DIV盒子的宽度、高度。
      三、用浏览器可视区的宽度、高度,减去DIV自身的宽度,高度,然后除以2。就可以获取到DIV距离页面的top值,left值。在赋值给DIV相应的top值,left值。
      四、随着我们的浏览器窗口的改变,让DIV盒子也能随着页面的改变而居中。(利用onresize事件)

代码如下:


<html>
<head>
<meta charset="utf-8">
<title>JS实现-DIV自动居中代码</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style>
*{margin:0;padding:0}
#box{width:100px;height:100px;position:absolute;top:30px;left:20px;border:1px solid red;}
</style>
</head>
<body>
<div id="box"></div>
<script>
window.onload = function(){
    function box(){
    //获取DIV为‘box’的盒子
    var oBox = document.getElementById('box');
    //获取元素自身的宽度
    var L1 = oBox.offsetWidth;
    //获取元素自身的高度
    var H1 = oBox.offsetHeight;
    //获取实际页面的left值。(页面宽度减去元素自身宽度/2)
    var Left = (document.documentElement.clientWidth-L1)/2;
    //获取实际页面的top值。(页面宽度减去元素自身高度/2)
    var top = (document.documentElement.clientHeight-H1)/2;
    oBox.style.left = Left+'px';
    oBox.style.top = top+'px';
    }
    box();
    //当浏览器页面发生改变时,DIV随着页面的改变居中。
    window.onresize = function(){
        box();
    } 
}
</script>
</body>
</html>



版权声明:除非注明,文章均为【卢杰个人博客】原创,欢迎转载!转载请注明本文地址,谢谢!

作者:卢杰个人博客

本人学识渊博,经验丰富,代码风骚,效率恐怖,C/C++、Java、php无不精通;熟练掌握各种框架,会DDOS一秒钟死一个站,会注入,会上传,会Xss,会破解,会嗅探,会开发,会业务,会运维,会渗透,调戏客服MM,无不精通,全面漏洞认识深刻,熟练掌握各种渗透理论,各种操作系统内核,一天只睡4小时,脾气好,不喷人,操作虎,意识强,渗透快,shell多,能过狗,能过盾,听指挥。千里之外取服务器首级,瞬息之间爆管理员,压安全狗如压草芥,电话通知出bug后,千里之外定位问题,瞬息之间修复上线。身体强壮,健步如飞可

返回列表
上一篇:
下一篇:

发表评论

快捷回复: