Facebook自动收报机如何工作,例如在某些res或缩放它隐藏


how does facebook ticker work, e.g on certain res or zoom it hides

我一直在试图弄清楚如何制作像Facebook这样的股票代码。

当您缩放超过 110% 时,股票代码会自动隐藏,这是因为代码将开始覆盖整个布局。

我想知道他们是怎么做到的? 它如何检测何时隐藏股票代码? 它是否抓住了JavaScript中的分辨率?

无论他们在做什么,都是通过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);
});