Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.10.2019, 03:00
Аспирант
Отправить личное сообщение для ethereal Посмотреть профиль Найти все сообщения от ethereal
 
Регистрация: 06.05.2019
Сообщений: 94

Плагин не работает правильно
Есть плагин Vanila Tilt https://micku7zu.github.io/vanilla-tilt.js/, у него есть функция "destroy" но почему то она не работает как надо.

Вот тут демо:
https://codepen.io/anakin-skywalker94/pen/yLLbELe

Помогите разобраться в чем дело...

1. При срабатывание функций "destroy", плагин удаляется только с первого элемента. Как сделать что бы удалилось со всех?

2. При срабатывание функций "enable", плагин включается обратно... Но его заданные начальные параметры пропадают. Как это исправить?

Помогите кто знает.
Заранее спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 25.10.2019, 10:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

VanillaTilt destroy
ethereal,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .items{
    display: flex;
    justify-content: space-around;

  }

  .items div {
  width: 150px;
  height: 150px;
  background: coral;
}
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js"></script>

</head>

<body>
<div class="items">
  <div class="js-tilt"></div>
  <div class="js-tilt"></div>
  <div class="js-tilt"></div>
</div>

<button id="destroy-button">Destroy</button>
<button id="enable-button">Enable</button>
<script>
let destroyBox = document.querySelectorAll(".js-tilt");
let settings = {
    max: 10,
    speed: 3000,
    scale: 0.8,
    perspective: 1000
  };
const init = () => VanillaTilt.init(destroyBox, settings);
init();
document.querySelector("#destroy-button").addEventListener("click", function () {
    destroyBox.forEach(el => el.vanillaTilt.destroy());
});

document.querySelector("#enable-button").addEventListener("click", init);

</script>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 25.10.2019, 18:14
Аспирант
Отправить личное сообщение для ethereal Посмотреть профиль Найти все сообщения от ethereal
 
Регистрация: 06.05.2019
Сообщений: 94

Спасибо большое
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
AddEventListener не правильно работает с классами Flakky Events/DOM/Window 2 27.05.2016 13:51
Не правильно работает условие... x1ds Общие вопросы Javascript 13 08.02.2016 16:56
Скрипт правильно работает только один раз, после начинает выдавать ошибку. xodock Events/DOM/Window 2 23.07.2012 13:04
JQ Плагин не работает ВэйДлин Общие вопросы Javascript 5 12.04.2011 02:36
Не работает jQuery плагин на cms DLE EvgenJS AJAX и COMET 2 03.11.2010 15:32