突出顯示最靠近視口中間的元素

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

現在你有索引的c在「最接近」的元素失去了，所以你可以做任何事情就像：

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