jquery - 突出显示最靠近视口中间的元素

Question

我在页面上有 3 个锚点。我想突出显示根据哪个锚点最靠近视口中间而固定的按钮列表。

我该怎么做？

我已经在使用 InView 和 ViewportOffset 插件了。

Answer 1

所以如果你没有视口的坐标，那么，你可以得到中间：

x = (viewport.x2 - viewport.x1) / 2;
y = (viewport.y2 - viewport.y1) / 2;

现在您可以执行以下操作：

var distances = [];
var elems = $("a");
elems.each(function(i){
    var o = $(this).offset();
    var d2 = (o.left - x)*(o.left - x) + (o.top - y)*(o.top - y);
    distances[i] = d2
});

现在你有了数组中距离的“平方”，你需要搜索最小的（最靠近中间的）：

var closest = 0;
for (i=0; i<distances.length;i++) {
    if (distances[i] < distances[closest]) {
         closest = i;
    }
}

现在你有了“closest”中最近元素的索引，所以你可以用它做任何事情，比如：

elems[i].addClass("higlighted");