根據項目要求實現放大縮小頁面時中間的登錄部分要一直居中
而且項目用的顏色為過渡 (不然也不會出現這個問題)
來看下我們的登錄頁面吧 最終實現效果為下圖 放大縮小都沒問題
開始做的時候 為了實現 挺費勁的 因為這個過渡讓人很無語。在360極速模式下出現這個問題,其他瀏覽器都沒問題,那就只能解決了。
布局是這樣的 body的高度設為auto;里面包含一個div 再里面為具體登錄和下面描述兩部分,都知道左右居中很簡單 margin:0 auto就行了,后面說上下高度設置問題。開始設置body高度為100%但是放大就不行了 過渡出現問題,
所以想的是設為了auto讓他距離上下高度一樣不就實現居中了。然后我放大縮小的時候調用resize同樣設置一下就可以了,問題出現的原因就在一個margin 一個padding 開始我設置的margin不行 后來改為padding就行了。
具體代碼
/* 開始頁面為居中 */
$("#login_tl").css("paddingTop",Math.abs(($(window).height()-$("#login_tl").height())/2));
$("#login_tl").css("paddingBottom",Math.abs(($(window).height()-$("#login_tl").height())/2));
放大縮小變化時
$(window).resize(function(){
$("#login_tl").css("paddingTop",Math.abs(($(window).height()-$("#login_tl").height())/2));
$("#login_tl").css("paddingBottom",Math.abs(($(window).height()-$("#login_tl").height())/2));
$("body").css("overflow","auto");
})