Как сделать изображение скрытым, а затем появиться в определенное время - PullRequest
Новая
       0

Как сделать изображение скрытым, а затем появиться в определенное время

1 голос
/ 14 апреля 2020

Я на самом деле не кодер, но я пытаюсь запустить какой-то базовый c javascript на конструкторе целевой страницы (Samcart), чтобы изображение было скрыто, а затем появлялось после того, как пользователь был на странице в течение определенного времени. протяженность времени.

Я попробовал несколько вещей. До сих пор я был в состоянии успешно извлечь изображение из imgur. Так что я могу показать это нормально. Я просто пытаюсь узнать, какой код javascript использовать.

Я нашел код javascript, который должен разрешить это для меня: 

<script>
  $("div").hide();
  setTimeout(function(){
    $("div").show();
  },3000);
</script>

Это код, который я создал на странице, чтобы извлечь изображение из imgur: 

<div class="valuestack">
  <img src="https://i.imgur.com/TrGitqf.png" width="60000" height="1300">
</div>

Честно говоря, я действительно не знаю, что делаю, и мне нужно кое-что прояснить.

Заранее спасибо, Натан

Ответы [ 3 ]

0 голосов
/ 14 апреля 2020

Здесь есть две вещи

  1. Вы должны включить JQuery, как показано ниже. (есть еще методы для включения, это только один способ) <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  2. Метод, который вы написали в теге script, никогда не вызывается. Поэтому этот маленький код должен вызываться при загрузке целевой страницы.

    <script> window.onload = function() { $(".valuestack").hide(); setTimeout(function() { $(".valuestack").show(); }, 3000); } </script>

0 голосов
/ 14 апреля 2020

Привет, @ Натан, вот JavaScript решение вашей проблемы.

Вы используете функцию setTimeout (), которая ожидает, что ей будет передана функция. Синтаксис приведенной выше функции следующий: 

setTimeout(function(){
  document.getElementById('valuestack').style.visibility = 'visible'; 
}, 2000);

Кроме того, вместо того, чтобы скрывать ее с помощью JavaScript / JQuery, вы можете рассмотреть возможность применения стиля CSS для обработки его скрытого по умолчанию ( то есть display: none) и затем просто показывает его в теле вызова функции setTimeout (). 

function showImage() {
  if (document.getElementById("valuestack") != null) {
    document.getElementById('valuestack').style.visibility = 'hidden';
    setTimeout(function() {
      document.getElementById('valuestack').style.visibility = 'visible';
    }, 2000);
  }
}

showImage();
.v-image {
  width: 50px;
  height: 50px;
}
.v-stack {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
body {
  background-color: black;
}
<body>
  <div id="valuestack" class="v-image v-stack">
    <img src="https://i.imgur.com/TrGitqf.png" width="600" height="1300" >
  </div>
</body>
0 голосов
/ 14 апреля 2020

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

Кроме того, этот код будет скрывать и отображать все элементы <div> на вашей странице. Возможно, вы захотите изменить код на целевой div.valuestack.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...