jQuery-让div处于屏幕正中间(垂直/水平) - NOTEBOOK
jQuery-让div处于屏幕正中间(垂直/水平)
JS / HTMLPosted on 2022-12-23
摘要 : 使用jQuery来动态调整div位置。
识别浏览器窗口尺寸和div的尺寸,通过加减乘除计算出div位置,并通过jQuery.css赋予给div。
❱ Html:
<div id="message">This is a message.</div>
❱ jQuery:
function resize_messageDiv(e){
var st=document.documentElement.scrollTop|| document.body.scrollTop;// 滚动条距顶部的距离
var sl=document.documentElement.scrollLeft|| document.body.scrollLeft;// 滚动条距左边的距离
// var st=$(document).scrollTop();
// var sl=$(document).scrollLeft();
var cw=$(window).width();// 屏幕的宽度
var ch=$(window).height();// 屏幕的高度
var if_w = $("#message").width(); // 宽度
var if_h = $("#message").height(); // 高度
if(if_w<cw){
var $ifl = cw/2-if_w/2; // 如果窗口小于浏览器宽度
}else{
var $ifl = 0; // 如果窗口大于浏览器宽度
}
if(if_h <= ch -110){
$("#message").css({top:st+ch/2-if_h/2-30,left:$ifl-10});
$("#message").width(if_w+20); $("#message").height(if_h+20);
}else{
// $('body').animate({scrollTop:0},0); //滚动到顶部
$("#message").css({top:st+20,left:$ifl-10});$("#message").width(if_w+20);
$("#message").height(if_h+20);
}
}
❱ 使用:
$(document).ready(function(){
$(window).resize(resize_iframeDiv);
}