jQuery窗口大小[重复]答案

【问题标题】：jQuery window size [duplicate]jQuery窗口大小[重复]
【发布时间】：2013-11-19 05:44:46
【问题描述】：

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

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

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

$(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

【问题讨论】：

标签： jquery html css

【解决方案1】：

尝试在window 对象上使用resize 函数。然后你可以使用.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();

【讨论】：

你可以在绑定后立即调用resize函数来模拟onLoad事件，它会保存重复的代码。 $(window).resize (function () { ... }).resize ();.
感谢您的回答，它对我帮助很大！

【解决方案2】：

无需将其绑定到mousemove 事件，只需在$(document).ready()（DOM 就绪后）或$(window).load()（资源加载后）调用计算。

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

【讨论】：

【解决方案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/

【讨论】：