Question

我们正忙于编写一种投资组合类型的插件。

我们需要知道在窗口调整大小后每次页面加载时我们如何让脚本知道屏幕的大小。在用户移动鼠标的时刻，一遍又一遍地计算窗口大小。我们只在第一次加载页面并调整页面大小后才想要这个。

什么是最好的解决方案？谢谢！

$(document).on("mousemove", function (event) {
    var mouseposX = event.pageX;
    var mouseposY = event.pageY;
    windowX = $(window).width();
    windowY = $(window).height();
    offsetX = Math.round(-(mouseposX / windowX * (blokjeContainerWidth - windowX)));
    offsetY = Math.round(-(mouseposY / windowY * (blokjeContainerHeight - windowY)));
});

这是示例的链接：portoflio

Answer 1

尝试使用resize对象上的window函数。然后，您可以使用.resize()

在加载时调用该函数

$(window).resize(function() { 
    var mouseposX = event.pageX;
    var mouseposY = event.pageY;
    windowX = $(window).width();
    windowY = $(window).height();
    offsetX = Math.round(-(mouseposX / windowX * (blokjeContainerWidth - windowX)));
    offsetY = Math.round(-(mouseposY / windowY * (blokjeContainerHeight - windowY)));
}).resize();

Answer 2

不要将其绑定到mousemove事件，只需在$(document).ready()（在DOM准备好之后）或$(window).load()（在加载资源之后）调用计算。

然后将上面的代码绑定到窗口resize事件而不是mousemove。您可能还想查看限制/去抖jQuery插件，因为resize事件的触发在不同浏览器中不一致。

Answer 3

您可以使用jquery

轻松获取信息

var ww = $(window).width();//initial width
var wh = $(window).height();//initial height 
$(window).on('resize', function() {
    ww = $(this).width();//new width
    wh = $(this).height();//new height
});

因此，您只需要将x和y值更改为：

windowX = ww;
windowY = wh;

我向小提琴添加了报告，因此您可以在更新时看到这些值。

http://jsfiddle.net/filever10/CWhzM/

jQuery窗口大小

3 个答案: