Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.02.2019, 16:12
Аспирант
Отправить личное сообщение для TheSanches Посмотреть профиль Найти все сообщения от TheSanches
 
Регистрация: 21.01.2018
Сообщений: 78

Создание объекта и плавное отображение на странице
Добрый день, подскажите как можно плавно отобразить блок на странице, предварительно создав его через JS.

Идея в том чтобы при наведении на ссылку создавался блок средствами JS, в котором должен отображаться адрес URL ссылки, все это я реализовал, но плавно отобразить блок не получается, как можно это сделать? по плану, все манипуляции нужно проводить с JS.
<a id="mylink" href="https://www.google.com.ua/?gws_rd=ssl">hover and you will see the url for this link</a>


let url = document.links.mylink.href;

let linkHover = document.links.mylink;

linkHover.onmouseenter = function () {
  divShow();
}

function divShow() {
  linkHover.style.position = 'relative';

  let div = document.createElement('div');

  div.style.position = 'absolute';
  div.style.padding = '20px';
  div.style.background = '#E7E4E2';
  div.style.color = '#000';
  div.style.bottom = '-85px';
  div.style.left = '0px';
  div.style.border = '1px solid #E4E1DF';
  div.style.borderRadius = '10px';
  div.style.boxShadow = '0 0 15px rgba(0,0,0,.1)';
  div.className = 'testDiv';

  div.innerHTML = url;

  linkHover.appendChild(div);

  linkHover.onmouseleave = function () {
    linkHover.removeChild(div);
  }
}
Ответить с цитированием
  #2 (permalink)  
Старый 05.02.2019, 16:35
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 473

Вот эту часть со стилями:
div.style.position = 'absolute';
  div.style.padding = '20px';
  div.style.background = '#E7E4E2';
  div.style.color = '#000';
  div.style.bottom = '-85px';
  div.style.left = '0px';
  div.style.border = '1px solid #E4E1DF';
  div.style.borderRadius = '10px';
  div.style.boxShadow = '0 0 15px rgba(0,0,0,.1)';

Можно упростить используя свойство cssText

Вот так для удобства чтения:
div.cssText = `
    position: absolute;
    padding: 20px;
    background: #E7E4E2;
    color: #000;
    bottom: -85px;
    left: 0px;
    border: 1px solid #E4E1DF;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0,0,0,.1);
    `;

Или тоже самое но уже в одну строку:
div.cssText = 'position: absolute; padding: 20px; background: #E7E4E2; color: #000; bottom: -85px; left: 0px; border: 1px solid #E4E1DF; border-radius: 10px; box-shadow: 0 0 15px rgba(0,0,0,.1);';
Ответить с цитированием
  #3 (permalink)  
Старый 05.02.2019, 16:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

TheSanches,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
 </head>

<body>
<a id="mylink" href="https://www.google.com.ua/?gws_rd=ssl">hover and you will see the url for this link</a>
 <script>
    let url = document.links.mylink.href;

let linkHover = document.links.mylink;

linkHover.onmouseenter = function () {
  divShow();
}

function divShow() {
  linkHover.style.position = 'relative';

  let div = document.createElement('div');

  div.style.position = 'absolute';
  div.style.padding = '20px';
  div.style.background = '#E7E4E2';
  div.style.color = '#000';
  div.style.bottom = '-85px';
  div.style.left = '0px';
  div.style.border = '1px solid #E4E1DF';
  div.style.borderRadius = '10px';
  div.style.boxShadow = '0 0 15px rgba(0,0,0,.1)';
  div.className = 'testDiv';
  div.style.opacity = 0;
  div.style.transition = '1s';
  div.style.transform = 'scale(0)'
  div.innerHTML = url;

  linkHover.appendChild(div);
  window.setTimeout(function() {
  div.style.opacity = 1;
  div.style.transform = 'scale(1)'
},100)

  linkHover.onmouseleave = function () {
    linkHover.removeChild(div);
  }
}

 </script>
</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 05.02.2019, 16:46
Аспирант
Отправить личное сообщение для TheSanches Посмотреть профиль Найти все сообщения от TheSanches
 
Регистрация: 21.01.2018
Сообщений: 78

Спасибо всем, вы мне очень помогли)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать отображение новых заявок на главной странице? Astin Общие вопросы Javascript 3 10.02.2016 12:00
Проверка объекта на странице ValeraNarkoman Общие вопросы Javascript 0 09.11.2015 12:46
Динамическое отображение контента на 2ой странице, в зависимости от выбора на 1ой Volchen0ck Events/DOM/Window 2 14.05.2014 16:01
DOM создание объекта JQ ~ вопрос реализации состояния Brook Events/DOM/Window 0 21.01.2014 22:45
Создание копий объекта - обязателен ли prototype? heh131 Общие вопросы Javascript 12 15.05.2010 12:55