ilyachalov (ilyachalov) wrote,
ilyachalov
ilyachalov

Category:

JavaScript: заметка рядом с элементом 3

Начало:
1. JavaScript: заметка рядом с элементом
2. JavaScript: заметка рядом с элементом 2

Решил задачу «Расположите заметку внутри элемента (абсолютное позиционирование)» к подразделу 1.11 «Координаты» второй части учебника по JavaScript.

Задача состоит в том, чтобы улучшить решение из предыдущей задачи (см. предыдущий пост). В предыдущей задаче мы отображали на HTML-странице заметки вокруг (снаружи) заданного элемента: выше него, справа от него и ниже него. А теперь требуется дополнить функцию positionAt возможностью помещать заметку внутри заданного элемента: внутри у верхней границы, внутри у правой границы и внутри у нижней границы.

При решении этой задачи не нужно делать ничего принципиально нового. Нужно лишь добавлять новые ветки, в которых надо вычислять координаты новых позиций. Меняем код:
function positionAt(anchor, position, elem) {
    // ... ваш код ...
    let rect = anchor.getBoundingClientRect();      // координаты HTML-элемента anchor
                                                    // относительно области просмотра
    let x = pageXOffset, y = pageYOffset;
    switch (position) {                             // вычислим новые координаты
        case "top-out":                             // для HTML-элемента elem
            x += rect.x;                            // относительно HTML-страницы
            y += rect.y - elem.offsetHeight; break;
        case "top-in":
            x += rect.x;
            y += rect.y; break;
        case "right-out":
            x += rect.x + anchor.offsetWidth;
            y += rect.y; break;
        case "right-in":
            x += rect.x + anchor.offsetWidth - elem.offsetWidth;
            y += rect.y; break;
        case "bottom-out":
            x += rect.x;
            y += rect.y + anchor.offsetHeight; break;
        case "bottom-in":
            x += rect.x;
            y += rect.y + anchor.offsetHeight - elem.offsetHeight;
    }
    
    elem.style.position = "absolute";               // исправим вид CSS-позиционирования,
    elem.style.left = x + "px";                     // передвинем HTML-элемент elem
    elem.style.top = y + "px";                      // в новую позицию
}
Красным цветом я отметил изменения.

Старые названия позиций "top", "right" и "bottom" заменили на "top-out", "right-out" и "bottom-out" соответственно. Новые названия позиций в новых ветках инструкции switch: "top-in", "right-in" и "bottom-in".

Измененный тестовый код:
// тестируем
let blockquote = document.querySelector('blockquote');

showNote(blockquote, "top-out",    "сверху снаружи");
showNote(blockquote, "top-in",     "сверху внутри");
showNote(blockquote, "right-out",  "справа снаружи");
showNote(blockquote, "right-in",   "справа внутри");
showNote(blockquote, "bottom-out", "снизу снаружи");
showNote(blockquote, "bottom-in",  "снизу внутри");

У меня в браузере заданная HTML-страница с нашим скриптом выглядит так (картинка):



В CSS-класс .note стиля заметки (этот стиль описан в отдельном файле index.css) внесено дополнительное указание opacity: .8;, регулирующее степень прозрачности заметки. На иллюстрации выше видно, что каждая заметка слегка просвечивает и сквозь нее виден текст, находящийся под нею. Тут подробнее:

https://developer.mozilla.org/ru/docs/Web/CSS/opacity
Tags: Образование, Программирование
Subscribe

  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your IP address will be recorded 

  • 0 comments