javascript - facebook ticker 是如何工作的，例如在某些 res 上或缩放它隐藏

Question

我一直在试图弄清楚如何制作像 facebook 这样的自动收报机。

当您放大超过 110% 时，自动收报机会自动隐藏，这是因为自动收报机将开始覆盖整个布局。

我想知道他们是怎么做到的？它如何检测何时隐藏代码？它在javascript中获取分辨率吗？

Answer 1

无论他们在做什么，都是通过 Javascript 完成的。您可以获取浏览器窗口的宽度和高度以及 DOM 中的任何元素。

您可以使用纯 Javascript，但 jQuery 让这变得轻而易举：

// Get the pixel width and height of the window
var window_height = $(window).height();  // not required, but for clarity
var window_width = $(window).width();
var ticker_width = $('div#ticker_wrapper').width();

// ON rezise, do something
$(window).resize(function() {

  // Do a caculation
  var new_width = (window_width/100)*10; // 10% width

  // Adjust the width of the ticker to suit
  $('div#ticker_width').css('width', new_height);

});