1、让元素在屏幕中央显示的 jQuery 函数
- 以下代码可让元素在屏幕中央显示,无论网页是否滚动。
- jQuery.fn.center = function () {
- $win = $(window);
- this.css('position','absolute');
- this.css('top', (($win.height() - this.outerHeight()) / 2) + $win.scrollTop() + 'px');
- this.css('left', (($win.width() - this.outerWidth()) / 2) + $win.scrollLeft() + 'px');
- return this;
- }
- 用法举例如下:
- HTML代码:
- <img id="test" src="http://www.google.co.jp/p_w_picpaths/nav_logo83.png" />
- JS 代码:
- window.onscroll = $('#test').center();
- window.onresize = $('#test').center();
- window.onload = $('#test').center();
2、css控制
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <style type="text/css">
- <!--
- div {
- position:absolute; //绝对定位
- top:50%; //距顶部50%
- left:50%;
- margin:-100px 0 0 -200px; //设定这个div的margin-top的负值为自身的高度的一半,margin-left的值也是自身的宽度的一半的负值.(感觉在绕口令)
- width:400px; //宽为400,那么margin-top为-200px
- height:200px; //高为200那么margin-left为-100px;
- border:1px solid red;
- line-height:200px;
- font-size:16px;
- text-align:center;
- z-index:99; //浮动在最上层
- }
- -->
- </style>