这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
当谈到网页的布局中,居中问题一直得不到很有效的解决,居中通常是相对于某一个元素的,比如我们经常所说的屏幕居中的问题,我们了解父元素的信息越多,我们就越能更加容易的实现居中布局。下面我们通过具体的实例来看看 javascript 如何来实现垂直水平居中
本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果,下面就以 span 元素为例子,介绍一下如何实现 span 元素在 div 中实现水平垂直居中效果,代码如下:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset=" utf-8">
- <style type="text/CSS">
- #box{
- width:200px;
- height:150px;
- background:blue;
- position:relative;
- }
- #antzone{
- background:green;
- }
- </style>
- <script type="text/javascript">
- window.onload=function(){
- var obox=document.getElementById("box");
- var oantzone=document.getElementById("antzone");
- var w=oantzone.offsetWidth;
- var h=oantzone.offsetHeight;
- oantzone.style.position="absolute";
- oantzone.style.left="50%";
- oantzone.style.top="50%";
- oantzone.style.marginLeft=-(w/2)+"px";
- oantzone.style.marginTop=-(h/2)+"px";
- }
- </script>
- </head>
- <body>
- <div id="box">
- <spanj id="antzone">phperz</span>
- </div>
- </body>
- </html>
上面你的代码实现了 span 元素在 div 中垂直水平居中效果,下面简单介绍一下它的实现过程。
一. 实现原理: 虽然 css 为明确给出 span 元素的尺寸,但是它毕竟有一个尺寸的,这个尺寸可以使用 offsetWidth 和 offsetHeight 属性获取,然后将此 span 元素设置为绝对定位,然后再将 left 和 top 属性值分别设置为 50%, 但是这个时候并不是 span 元素的中心点垂直水平居中,而是 span 元素的左上角垂直水平居中,然后在设置 span 元素的负的外边距,尺寸是 span 元素宽高的一半,这样就实现了垂直水平居中效果。
例子二:
思路:实现起来最麻烦的其实是水平居中和垂直居中,其中垂直居中是最麻烦的。考虑到浏览器兼容性,网上看了一些资料,发现在页面中垂直居中确实没有什么太好的办法。于是就采用了 position:fixed 属性控制时钟的绝对位置,通过 clientWidth 和 clientHeight 来获取时钟的宽和高,利用 javascript 控制 marginLeft 和 marginTop 来居中时钟。
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Centered Clock</title>
- <style type="text/css">
- body{
- background: #fff;
- }
- body, div, p{
- margin: 0;
- padding: 0;
- }
- .center{
- position: fixed;
- left: 50%;
- top: 50%;
- }
- .box{
- border: 1px solid #000;
- padding: 20px 30px;
- font-size: 1.5em;
- font-weight: 500;
- margin: auto auto;
- }
- </style>
- </head>
- <body>
- <div class="center">
- <p class="box"></p>
- </div>
- </body>
- <script type="text/javascript">
- window.onload = function () {
- getTimes();
- var box = document.getElementsByClassName("box")[0];
- box.style.marginLeft = -box.clientWidth / 2 + "px";
- box.style.marginTop = -box.clientHeight / 2 + "px";
- setInterval(getTimes, 1000);
- }
- function getTimes() {
- var box = document.getElementsByClassName("box")[0];
- var dateTime = new Date();
- var year = dateTime.getFullYear();
- var date = dateTime.getDate();
- var month = dateTime.getMonth() + 1;
- var hours = dateTime.getHours();
- var minutes = dateTime.getMinutes();
- var secondes = dateTime.getSeconds();
- box.innerHTML = year + "-" + format(month) + "-" + format(date) + " " + format(hours) + ":"+ format(minutes) +":" + format(secondes);
- }
- function format(a) {
- return a.toString().replace(/^(\d)$/, "0$1");
- }
- </script>
- </html>
例子三:
思路:采用相对定位,设定 left 和 top 值为 (pw-w)/2 和 (ph-h)/w,其中 pw 和 ph 为外部标签的宽与高,w 和 h 为内部标签的宽与高。
核心代码:
以上就是给大家总结的三种 javascript 实现居中的例子,小伙伴们可以参考下,希望对大家能够有所帮助。
来源: http://www.phperz.com/article/17/0414/269412.html