HTML / Javascript - попробуйте указать указатели на страницы в качестве руководства

Я пытаюсь получить этот небольшой учебник, чтобы показать первые 5 секунд, указывающие на панель меню при посещении веб-страницы. Кто-нибудь может сказать мне, как я могу это сделать с помощью CSS CSS или Javascript?

Я обвел его красным от того, что хотел на изображении.

  • использовать значок
  • как я могу это указать на конкретную точку на веб-странице

введите описание изображения здесь

javascript,html,css,

-4

Ответов: 1

0

Одно и простое решение - создать наложение, которое будет охватывать всю страницу. Цель наложения будет превышать щелчок пользователя и уничтожит сам себя, а также всплывающую подсказку.

Чтобы создать всплывающую подсказку, просто укажите целевой элемент, так как всплывающая подсказка должна быть создана, самый простой способ - использовать css-селектор и jQuery.

С помощью jQuery вы можете найти целевой элемент на странице, получить свою позицию и размер и в соответствии с этим создать элемент подсказки.

Вот быстрый пример (также как скрипт https://jsfiddle.net/2c0q91np/ ):

$(function() {
// Find the target element on the page
var target = $(".menu li:nth-child(4n)");
var overlay = null;
var tooltip = null;

// Creates overlay which will handle the first click
function createOverlay() {
        overlay = $("<div class='overlay'></div>").appendTo("body");

        // When user clicks somewhere on the page the overlay will handle the click
        overlay.one("click", destroyOverlay);
}

// Destroys the overlay and tooltip
function destroyOverlay() {
        if(overlay) {
                overlay.remove();
                overlay = null;
        }
        if(tooltip) {
                tooltip.remove();
                tooltip = null;    
        }
}

// Creates tooltip for the target element
function createTooltip(text) {
        // Get the position of the target
        var pos = target.position();
        // Get the height of the target
        var height = target.outerHeight();

        // Create the tooltip
        tooltip = $("<div class='tooltip'></div>")
                .html(text)
                .appendTo("body")
                .css({
                        "top": pos.top + height + "px",
                        "left": pos.left + "px"
                });
}

createOverlay();
createTooltip("Click on one of the tabs to<br>quickly scroll through the page!");

// Desotroy tooltip automatically after 5 seconds
setTimeout(destroyOverlay, 5000);
});
body {
  background: black;
  font-family: Verdana;
  font-size: 12px;
}

.menu {
  border: 1px solid gray;
  padding: 0;
  margin: 0;
  width: 100%;
  display: flex;
}

.menu li {
  list-style-type: none;
  color: gray;
  padding: 15px;
  flex: 1;
  text-align: center;
}

.menu li + li {
  border-left: 1px solid gray;
}

.menu li a {
  color: gray;
  text-decoration: none;
}

.overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(255,255,255,.0001);
  z-index: 999;
}

.tooltip {
  position: absolute;
  z-index: 1000;
  margin: 10px;
  color: #fff;
  
  width: 180px;
  height: auto;
  background: red;
  padding: 10px;
}

.tooltip:before { 
  content:"";
  position: absolute;
  left: 25%;
  transform: translate(-50%,-26px);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 13px 26px 13px;
  border-color: transparent transparent red transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">Product</a>
  </li>
  <li>
    <a href="#">Shop</a>
  </li>
  <li>
    <a href="#">About the brand</a>
  </li>
  <li>
    <a href="#">Join us</a>
  </li>
  <li>
    <a href="#">Contact</a>
  </li>
</ul>

JavaScript, HTML, CSS,
Похожие вопросы
Яндекс.Метрика