Использование TouchMove для запуска события парения - PullRequest
Новая
       8

Использование TouchMove для запуска события парения

0 голосов
/ 29 ноября 2018

Я относительно новичок в кодировании и столкнулся с определенной проблемой на моем сайте.На моей домашней странице есть изображения с эффектом наложения текста, который возникает при наведении курсора на изображение.Он отлично работает на рабочем столе, но не на мобильном телефоне.Я хотел бы, чтобы текст при наведении курсора появлялся, когда пользователь пролистывал изображение в любом направлении.Я провел некоторое исследование, и кажется, что я должен каким-то образом использовать jQuery и функцию touchmove, чтобы это произошло.Но я просто не могу понять это.Я использую Shopify (дебютная тема) для создания своего сайта.Любая помощь будет оценена!

Вот мой CSS для события при наведении: 

//hover effect//
.container {
  position: relative;
  width: 100%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 99%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #000000;
}

.container:hover .overlay {
  opacity: 0.7;
}

.text {
  color: white;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  white-space: pre;
}

Спасибо !!!!

Ответы [ 2 ]

0 голосов
/ 30 ноября 2018

так что код Мустахиста работает!У него было несколько синтаксических ошибок, но я смог быстро их устранить.Вот окончательная версия: 

const myTargetElements = document.getElementsByClassName('overlay');

// convert HTML collection to array
const myTargetElementsArray = [].slice.call(myTargetElements);
myTargetElementsArray.forEach(function (element) {

    // add hover style
    element.addEventListener('touchmove', function (e) {
        e.target.classList.add('hover'); // or whichever class name you'd like
    });

    // remove hover style on end
    element.addEventListener('touchend', function (e) {
        e.target.classList.remove('hover'); // or whichever class name you'd like
    });
    });

Вставьте код в ваш theme.js и соответственно измените имена переменных.Должно работать на всех!

Приветствую этого парня!

0 голосов
/ 29 ноября 2018

Вам нужно применить класс с желаемым эффектом к целевому элементу.Вы можете сделать это с помощью Jquery, но Javascript вполне способен сделать это самостоятельно.Что-то вроде:

Javascript: 

const myTargetElement = document.getElementsByClassName('overlay')[0]; // index to be confirmed

// add hover style
myTargetElement.addEventListener('touchmove', function (e) {
    e.target.classList.add('hover'); // or whichever class name you'd like
});
// remove hover style on end
myTargetElement.addEventListener('touchend', function (e) {
    e.target.classList.remove('hover'); // or whichever class name you'd like
});

CSS: 

.container:hover .overlay,
.overlay.hover {
   opacity: 0.7;
}

Примечание: если вы хотите настроить таргетинг на все элементы .overlay на вашей странице с этим кодом, вам нужно что-то вроде:

Javascript: 

const myTargetElements = document.getElementsByClassName('overlay');

// convert HTML collection to array
const myTargetElementsArray = [].slice.call(myTargetElements);
myTargetElementsArray.forEach(function (element) {

    // add hover style
    element.addEventListener('touchmove', function (e) {
        e.target.classList.add('hover'); // or whichever class name you'd like
    });

    // remove hover style on end
    element.addEventListener('touchend', function (e) {
        e.target.classList.remove('hover'); // or whichever class name you'd like
    });
});
...