Блог

http://leaverou.github.com/animatable/

На этой странице щелкните блок и увидите появившийся черный прямоугольник. Черный прямоугольник появится либо слева, либо справа от пронумерованных блоков, в зависимости от того, на какой стороне блока больше места. Вы можете изменить размер окна вашего браузера, и блоки будут переставлены так, чтобы в каждой строке было столько блоков, сколько поместится на экране. Таким образом, даже когда вы измените размер окна вашего браузера, черный ящик все равно будет смотреть, с какой стороны блока (на который вы нажали) больше места, и он появится с этой стороны.

Я предполагаю, что это делается с помощью jQuery, может кто-нибудь описать технику, которую она использовала для этого? Я действительно не мог найти и понять это, глядя на ее код. Я хотел бы изучить технику, позволяющую это сделать, поэтому описание того, как это сделать, было бы прекрасно, а пример даже лучше. Спасибо!

На этой странице нет jQuery, как вы можете проверить, открыв консоль и введя jQuery в ней, чтобы увидеть, определена ли глобальная переменная jQuery.

Прошло много времени с тех пор, как я писал этот код, поэтому я не совсем помню, но соответствующая часть находится здесь: https://github.com/LeaVerou/animatable/blob/gh-pages/index.js#L36-69

Мне это кажется довольно простым. Она должна привязаться к событию onclick, а затем найти расстояние между левой стороной элемента и краем документа, а затем правой стороной элемента и краем документа. Основываясь на этом, она позиционирует поле.

http://jsfiddle.net/uhHUM/1/

 $('.box').click( function() {
    var leftEdge = $(this).offset().left;
    var rightEdge = leftEdge   $(this).width();
    var docWidth = $(document).width();

    $('#left span').html(leftEdge);
    $('#right span').html(docWidth - rightEdge);

    if ( leftEdge > (docWidth - rightEdge) ) { 
      //position left 
    }
    else { 
      //position right
    }
});