Question

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

我尝试使用屏幕调整大小，但似乎无法让它工作，所以我刮了它。我是JS和Jquery的新手，所以我需要一个正确的方向。

这是我正在处理的网站。 http://afrohorse.netau.net/我知道这是不好的做法，但为了这个页面，我把CSS和JS全部放在一个页面中，以便人们可以右键单击 - ＆gt;查看源代码，因为我无法让JSFiddle工作。

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

编辑添加代码：

<!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>

Answer 1

在调整窗口大小时，您需要设置内容以使内容居中：

$( window ).resize(function() {
    $('div.box').css({'right': parseInt(window.innerWidth/2),
                      'bottom': parseInt(window.innerHeight/2)
                     });
});

Answer 2

您是否已尝试使用https://api.jquery.com/resize/？这应该使您能够在调整大小时重新定位div。

Answer 3

您可以尝试this jsfiddle

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();
    });
});

Answer 4

在代码中添加css

.box{
position:absolute;
left:0;
right:0;
}

这将使你的div从右到左居中。使用您当前使用的其他CSS。

Answer 5

替代（不绑定到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();

在屏幕上居中调整大小

5 个答案: