Javascript 在屏幕上居中调整Div的大小_Javascript_Jquery_Html_Css

Javascript 在屏幕上居中调整Div的大小

javascript jquery html css

Javascript 在屏幕上居中调整Div的大小,javascript,jquery,html,css,Javascript,Jquery,Html,Css,所以，我有我昨天开始的这一页。它将以页面为中心的div移离鼠标。在我调整页面大小之前，一切都很好。直到我移动鼠标，div才回到中间我尝试过使用屏幕上的调整大小，但似乎无法让它工作，所以我刮它。我对JS和Jquery还比较陌生，所以我需要一个指向正确方向的点这是我正在工作的网站。我知道这是一种不好的做法，但为了这个页面，我将CSS和JS都放在一个页面中，这样人们就可以右键单击->查看源代码，因为我无法使用JSFIDLE 提前感谢，如果您需要任何澄清，请告诉我！：）编辑以添加代码： <!

所以，我有我昨天开始的这一页。它将以页面为中心的div移离鼠标。在我调整页面大小之前，一切都很好。直到我移动鼠标，div才回到中间

我尝试过使用屏幕上的调整大小，但似乎无法让它工作，所以我刮它。我对JS和Jquery还比较陌生，所以我需要一个指向正确方向的点

这是我正在工作的网站。我知道这是一种不好的做法，但为了这个页面，我将CSS和JS都放在一个页面中，这样人们就可以右键单击->查看源代码，因为我无法使用JSFIDLE

提前感谢，如果您需要任何澄清，请告诉我！：）

编辑以添加代码：

<!DOCTYPE html>
<html>
    <head>
        <title>qwerty</title>       
        <script src="jQuery.js"></script>
        <style type="text/css">

        body {
            background-image:url('cloud.jpg');
            background-repeat:repeat;
        }

        .box { 
            background-image:url('trans.png');
            background-repeat:repeat;
            width: 500px; 
            height: 200px; 
            position: absolute; 
            margin:100px -250px -100px 250px;
            bottom:50%;
            right:50%;
            -webkit-border-radius: 15px 15px 15px 15px;
            border-radius: 15px 15px 15px 15px;
            -webkit-box-shadow:inset 2px 2px 20px 1px #E0D9D9;
            box-shadow:inset 2px 2px 20px 1px #E0D9D9;

        }
        </style>

                <script type="text/javascript">
            $(document).ready(function(){
            $(window).mousemove(function(e){
            var x = e.pageX-window.innerWidth/2;
            if (x <= 400) {
                x2=x*0.01
                x3=x2+window.innerWidth/2
                $('div.box').css({'right': x3}); 
            }
            var y = e.pageY-window.innerHeight/2;
            if (y <= 400) {
                y2=y*0.01
                y3=y2+window.innerHeight/2
                $('div.box').css({'bottom': y3}); 
            }
        });
    });

        </script>


    </head>
    <body>
        <div class="box"></div>

    </body>
</html>


qwerty
身体{
背景图片：url（'cloud.jpg'）；
背景重复：重复；
}
.box{
背景图片：url（'trans.png'）；
背景重复：重复；
宽度：500px；
高度：200px；
位置：绝对位置；
利润率：100px-250px-100px-250px；
底部：50%；
右：50%；
-webkit边界半径：15px 15px 15px 15px；
边界半径：15px 15px 15px 15px；
-webkit盒阴影：插入2px 2px 20px 1px#E0D9D9；
盒影：插入2px 2px 20px 1px#E0D9D9；
}
$（文档）.ready（函数（）{
$（窗口）.mousemove（函数（e）{
var x=e.pageX-window.innerWidth/2；
如果（x在代码中添加css
.box{
position:absolute;
left:0;
right:0;
}

这将使您的div从右向左居中。请使用您当前使用的其他css。
调整窗口大小时，您需要设置一些内容以居中：
$( window ).resize(function() {
    $('div.box').css({'right': parseInt(window.innerWidth/2),
                      'bottom': parseInt(window.innerHeight/2)
                     });
});

您已经尝试使用了吗？这将使您能够在调整大小时重新定位div。
替代方法（不绑定window.resize事件）在调整浏览器窗口大小时强制浮动div重新居中
不绑定到window.resize事件
jQuery.fn.center = function() {
    var container = $(window);
    var top = -this.height() / 2;
    var left = -this.width() / 2;
    return this.css('position', 'absolute').css({ 'margin-left': left + 'px', 'margin-top': top + 'px', 'left': '50%', 'top': '50%' });
}

用法：
$('#mydiv').center();

你可以试一下
函数移动框（e）{
如果（e==未定义）{
e={pageX:0，pageY:0}
}
var x=e.pageX-window.innerWidth/2；
if（x）请包含您的代码。@MateiMihai添加了代码！div以页面加载为中心。调整页面/窗口的大小后，我需要让它重新居中。请首先尝试上面的css并添加注释：）我已经把它放在我的css中心了。你的css做了一些我已经做过的事情。@Askanison4我认为你是正确的。我本来打算否决它，但缺乏必要的声誉。我说过我试过了，但一定是做错了什么。我是jquery和javascript新手。这个答案很完美！我会尽快给它打上正确的标记它允许我！谢谢！我已经让它居中了。我需要它在调整窗口大小时重新居中。谢谢。是的，这也可以，但我已经接受了一个答案。：@MathewMacLean我正试图给出另一个答案（不绑定窗口。调整大小事件）…如果有帮助，您可以向上投票：）@MathewMacLean希望你能看到我之前的评论：）
function moveBox(e) {
    if (e === undefined) {
        e = { pageX: 0, pageY: 0 }
    }

    var x = e.pageX-window.innerWidth/2;
    if (x <= 400) {
        x2=x*0.01
        x3=x2+window.innerWidth/2
        $('div.box').css({'right': x3}); 
    }
    var y = e.pageY-window.innerHeight/2;
    if (y <= 400) {
        y2=y*0.01
        y3=y2+window.innerHeight/2
        $('div.box').css({'bottom': y3}); 
    }
}
$(document).ready(function(){
    $(window).mousemove(function(e){
        moveBox(e);
    });

    $(window).resize(function(){
        moveBox();
    });
});