Сделайте кнопки Ripple интерактивными с помощью Javascript и CSS

Я нашел сценарий, который создает анимацию при нажатии кнопки. Проблема в том, что он не перенаправляет на ссылку.

(function() { var cleanUp, debounce, i, len, ripple, rippleContainer, ripples, showRipple;

debounce = function(func, delay) {
  var inDebounce;
  inDebounce = undefined;
  return function() {
    var args, context;
    context = this;
    args = arguments;
    clearTimeout(inDebounce);
    return inDebounce = setTimeout(function() {
      return func.apply(context, args);
    }, delay);
  };
};

showRipple = function(e) {
  var pos, ripple, rippler, size, style, x, y;
  ripple = this;
  rippler = document.createElement('span');
  size = ripple.offsetWidth;
  pos = ripple.getBoundingClientRect();
  x = e.pageX - pos.left - (size / 2);
  y = e.pageY - pos.top - (size / 2);
  style = 'top:' + y + 'px; left: ' + x + 'px; height: ' + size + 'px; width: ' + size + 'px;';
  ripple.rippleContainer.appendChild(rippler);
  return rippler.setAttribute('style', style);
};

cleanUp = function() {
  while (this.rippleContainer.firstChild) {
    this.rippleContainer.removeChild(this.rippleContainer.firstChild);
  }
};

ripples = document.querySelectorAll('[ripple]');

for (i = 0, len = ripples.length; i < len; i++) {
  ripple = ripples[i];
  rippleContainer = document.createElement('div');
  rippleContainer.className = 'ripple--container';
  ripple.addEventListener('mousedown', showRipple);
  ripple.addEventListener('mouseup', debounce(cleanUp, 2000));
  ripple.rippleContainer = rippleContainer;
  ripple.appendChild(rippleContainer);
}
 }());
.bg--red {
  background-color: #e74c3c;
}
.tx--red {
  color: #e74c3c;
}
.bg--blue {
  background-color: #00f;
}
.tx--blue {
  color: #00f;
}
.bg--green {
  background-color: #2ecc71;
}
.tx--green {
  color: #2ecc71;
}
.bg--white {
  background-color: #fff;
}
.tx--white {
  color: #fff;
}
body {
  color: #777;
  text-align: center;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
}
button {
  border: none;
  padding: 20px;
  margin: 10px;
  font-size: 14px;
  outline: 0;
  box-shadow: 0px 2px 4px 0px #000;
  border-radius: 4px;
}
button:active {
  box-shadow: 0px 2px 6px 0px #000;
}
[ripple] {
  position: relative;
  overflow: hidden;
}
[ripple] .ripple--container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
[ripple] .ripple--container span {
  transform: scale(0);
  border-radius: 100%;
  position: absolute;
  opacity: 0.75;
  background-color: #fff;
  animation: ripple 1000ms;
}
@-moz-keyframes ripple {
  to {
    opacity: 0;
    transform: scale(2);
  }
}
@-webkit-keyframes ripple {
  to {
    opacity: 0;
    transform: scale(2);
  }
}
@-o-keyframes ripple {
  to {
    opacity: 0;
    transform: scale(2);
  }
}
@keyframes ripple {
  to {
    opacity: 0;
    transform: scale(2);
  }
}
<div class = "content">
  <a  class = "bg--red tx--white" ripple = "ripple" href = "http://www.google.de">Fail</a>
  <button class = "bg--blue tx--white" ripple = "ripple">Info</button>
  <button class = "bg--green tx--white" ripple = "ripple">Save</button>
</div>

Я хочу сделать кнопку интерактивной. Если вы нажмете одну из кнопок, она должна перенаправить на ссылку.

Моим решением было бы добавить функцию перенаправления javascript, но я этого не хочу. Я хочу сделать это возможным с помощью <a href = "">

Буду рад, если у кого-то есть решение :)

javascript jquery html css button
10.12.2018 11:59
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
296
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Вы можете обернуть <a> вокруг <button>

<!-- begin snippet: js hide: false console: true babel: false -->
   

 (function() { var cleanUp, debounce, i, len, ripple, rippleContainer, ripples, showRipple;

debounce = function(func, delay) {
  var inDebounce;
  inDebounce = undefined;
  return function() {
    var args, context;
    context = this;
    args = arguments;
    clearTimeout(inDebounce);
    return inDebounce = setTimeout(function() {
      return func.apply(context, args);
    }, delay);
  };
};

showRipple = function(e) {
  var pos, ripple, rippler, size, style, x, y;
  ripple = this;
  rippler = document.createElement('span');
  size = ripple.offsetWidth;
  pos = ripple.getBoundingClientRect();
  x = e.pageX - pos.left - (size / 2);
  y = e.pageY - pos.top - (size / 2);
  style = 'top:' + y + 'px; left: ' + x + 'px; height: ' + size + 'px; width: ' + size + 'px;';
  ripple.rippleContainer.appendChild(rippler);
  return rippler.setAttribute('style', style);
};

cleanUp = function() {
  while (this.rippleContainer.firstChild) {
    this.rippleContainer.removeChild(this.rippleContainer.firstChild);
  }
};

ripples = document.querySelectorAll('[ripple]');

for (i = 0, len = ripples.length; i < len; i++) {
  ripple = ripples[i];
  rippleContainer = document.createElement('div');
  rippleContainer.className = 'ripple--container';
  ripple.addEventListener('mousedown', showRipple);
  ripple.addEventListener('mouseup', debounce(cleanUp, 2000));
  ripple.rippleContainer = rippleContainer;
  ripple.appendChild(rippleContainer);
}
 }());
    .bg--red {
      background-color: #e74c3c;
    }
    .tx--red {
      color: #e74c3c;
    }
    .bg--blue {
      background-color: #00f;
    }
    .tx--blue {
      color: #00f;
    }
    .bg--green {
      background-color: #2ecc71;
    }
    .tx--green {
      color: #2ecc71;
    }
    .bg--white {
      background-color: #fff;
    }
    .tx--white {
      color: #fff;
    }
    body {
      color: #777;
      text-align: center;
      padding: 0 0 0 0;
      margin: 0 0 0 0;
    }
    button {
      border: none;
      padding: 20px;
      margin: 10px;
      font-size: 14px;
      outline: 0;
      box-shadow: 0px 2px 4px 0px #000;
      border-radius: 4px;
    }
    button:active {
      box-shadow: 0px 2px 6px 0px #000;
    }
    [ripple] {
      position: relative;
      overflow: hidden;
    }
    [ripple] .ripple--container {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
    [ripple] .ripple--container span {
      transform: scale(0);
      border-radius: 100%;
      position: absolute;
      opacity: 0.75;
      background-color: #fff;
      animation: ripple 1000ms;
    }
    @-moz-keyframes ripple {
      to {
        opacity: 0;
        transform: scale(2);
      }
    }
    @-webkit-keyframes ripple {
      to {
        opacity: 0;
        transform: scale(2);
      }
    }
    @-o-keyframes ripple {
      to {
        opacity: 0;
        transform: scale(2);
      }
    }
    @keyframes ripple {
      to {
        opacity: 0;
        transform: scale(2);
      }
    }
<div class = "content">
      <a  class = "bg--red tx--white" ripple = "ripple" href = "http://www.google.de">Fail</a>
      <a href = "https://www.google.com/" target = "_blank"><button class = "bg--blue tx--white" ripple = "ripple">Info</button></a>
      <a href = "https://www.google.com/" target = "_blank"><button class = "bg--green tx--white" ripple = "ripple">Save</button></a>
    </div>

Это не работает, и у меня есть кнопки с href. Я не могу добавить его дважды, также <a href = ""> <a href = ""> Ошибка </a> </a>

— Elyas Nice 10.12.2018 12:04

@jyme Создайте страницу Html по умолчанию и протестируйте ее там.

— Elyas Nice 10.12.2018 12:23
10.12.2018 12:02

Попробуйте ... здесь это не сработает, потому что stackoverflow отключил перенаправление ....

(function() { var cleanUp, debounce, i, len, ripple, rippleContainer, ripples, showRipple;

$('.bg--blue').on('click',function(){
window.open("https://stactoverflow.com")
})
$('.bg--green').on('click',function(){
window.open("https://stactoverflow.com")
})

debounce = function(func, delay) {
  var inDebounce;
  inDebounce = undefined;
  return function() {
    var args, context;
    context = this;
    args = arguments;
    clearTimeout(inDebounce);
    return inDebounce = setTimeout(function() {
      return func.apply(context, args);
    }, delay);
  };
};

showRipple = function(e) {
  var pos, ripple, rippler, size, style, x, y;
  ripple = this;
  rippler = document.createElement('span');
  size = ripple.offsetWidth;
  pos = ripple.getBoundingClientRect();
  x = e.pageX - pos.left - (size / 2);
  y = e.pageY - pos.top - (size / 2);
  style = 'top:' + y + 'px; left: ' + x + 'px; height: ' + size + 'px; width: ' + size + 'px;';
  ripple.rippleContainer.appendChild(rippler);
  return rippler.setAttribute('style', style);
};

cleanUp = function() {
  while (this.rippleContainer.firstChild) {
    this.rippleContainer.removeChild(this.rippleContainer.firstChild);
  }
};

ripples = document.querySelectorAll('[ripple]');

for (i = 0, len = ripples.length; i < len; i++) {
  ripple = ripples[i];
  rippleContainer = document.createElement('div');
  rippleContainer.className = 'ripple--container';
  ripple.addEventListener('mousedown', showRipple);
  ripple.addEventListener('mouseup', debounce(cleanUp, 2000));
  ripple.rippleContainer = rippleContainer;
  ripple.appendChild(rippleContainer);
}
 }());
.bg--red {
  background-color: #e74c3c;
}
.tx--red {
  color: #e74c3c;
}
.bg--blue {
  background-color: #00f;
}
.tx--blue {
  color: #00f;
}
.bg--green {
  background-color: #2ecc71;
}
.tx--green {
  color: #2ecc71;
}
.bg--white {
  background-color: #fff;
}
.tx--white {
  color: #fff;
}
body {
  color: #777;
  text-align: center;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
}
button {
  border: none;
  padding: 20px;
  margin: 10px;
  font-size: 14px;
  outline: 0;
  box-shadow: 0px 2px 4px 0px #000;
  border-radius: 4px;
}
button:active {
  box-shadow: 0px 2px 6px 0px #000;
}
[ripple] {
  position: relative;
  overflow: hidden;
}
[ripple] .ripple--container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
[ripple] .ripple--container span {
  transform: scale(0);
  border-radius: 100%;
  position: absolute;
  opacity: 0.75;
  background-color: #fff;
  animation: ripple 1000ms;
}
@-moz-keyframes ripple {
  to {
    opacity: 0;
    transform: scale(2);
  }
}
@-webkit-keyframes ripple {
  to {
    opacity: 0;
    transform: scale(2);
  }
}
@-o-keyframes ripple {
  to {
    opacity: 0;
    transform: scale(2);
  }
}
@keyframes ripple {
  to {
    opacity: 0;
    transform: scale(2);
  }
}
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "content">
  <a  class = "bg--red tx--white" ripple = "ripple" href = "http://www.google.de">Fail</a>
  <button class = "bg--blue tx--white" ripple = "ripple">Info</button>
  <button class = "bg--green tx--white" ripple = "ripple">Save</button>
</div>

Это решение, но я не буду делать код перенаправления javascript для каждой кнопки.

— Elyas Nice 10.12.2018 12:29

почему вы используете кнопку в теге <a>? попробуйте применить классы css к кнопкам .. это будет работать

— Fraz Abbas 10.12.2018 14:15
10.12.2018 12:18
Ответ принят как подходящий 

(function() { var cleanUp, debounce, i, len, ripple, rippleContainer, ripples, showRipple;

debounce = function(func, delay) {
  var inDebounce;
  inDebounce = undefined;
  return function() {
    var args, context;
    context = this;
    args = arguments;
    clearTimeout(inDebounce);
    return inDebounce = setTimeout(function() {
      return func.apply(context, args);
    }, delay);
  };
};

showRipple = function(e) {
  var pos, ripple, rippler, size, style, x, y;
  ripple = this;
  rippler = document.createElement('span');
  size = ripple.offsetWidth;
  pos = ripple.getBoundingClientRect();
  x = e.pageX - pos.left - (size / 2);
  y = e.pageY - pos.top - (size / 2);
  style = 'top:' + y + 'px; left: ' + x + 'px; height: ' + size + 'px; width: ' + size + 'px;';
  ripple.rippleContainer.appendChild(rippler);
  return rippler.setAttribute('style', style);
};

cleanUp = function() {
  while (this.rippleContainer.firstChild) {
    this.rippleContainer.removeChild(this.rippleContainer.firstChild);
  }
};

ripples = document.querySelectorAll('[ripple]');

for (i = 0, len = ripples.length; i < len; i++) {
  ripple = ripples[i];
  rippleContainer = document.createElement('div');
  rippleContainer.className = 'ripple--container';
  ripple.addEventListener('mousedown', showRipple);
  ripple.addEventListener('mouseup', debounce(cleanUp, 2000));
  ripple.rippleContainer = rippleContainer;
  ripple.appendChild(rippleContainer);
}
 }());
.bg--red {
  background-color: #e74c3c;
}
.tx--red {
  color: #e74c3c;
}
.bg--blue {
  background-color: #00f;
}
.tx--blue {
  color: #00f;
}
.bg--green {
  background-color: #2ecc71;
}
.tx--green {
  color: #2ecc71;
}
.bg--white {
  background-color: #fff;
}
.tx--white {
  color: #fff;
}
body {
  color: #777;
  text-align: center;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
}
button,a { /* style the anchor as a button */
  border: none;
  padding: 20px;
  margin: 10px;
  font-size: 14px;
  outline: 0;
  box-shadow: 0px 2px 4px 0px #000;
  border-radius: 4px;
}
button:active {
  box-shadow: 0px 2px 6px 0px #000;
}
[ripple] {
  position: relative;
  overflow: hidden;
}
[ripple] .ripple--container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
[ripple] .ripple--container span {
  transform: scale(0);
  border-radius: 100%;
  position: absolute;
  opacity: 0.75;
  background-color: #fff;
  animation: ripple 1000ms;
}
@-moz-keyframes ripple {
  to {
    opacity: 0;
    transform: scale(2);
  }
}
@-webkit-keyframes ripple {
  to {
    opacity: 0;
    transform: scale(2);
  }
}
@-o-keyframes ripple {
  to {
    opacity: 0;
    transform: scale(2);
  }
}
@keyframes ripple {
  to {
    opacity: 0;
    transform: scale(2);
  }
}
<div class = "content">
  <a  class = "bg--red tx--white" ripple = "ripple" href = "http://www.google.de">Fail</a>
  <button class = "bg--blue tx--white" ripple = "ripple">Info</button>
  
  <!-- change this to anchor -->
  <a href = "http://www.google.com" class = "bg--green tx--white" ripple = "ripple">Save</a>
  
  
</div>

Попробуйте стилизовать элемент привязки как кнопку. внесены некоторые изменения в html и css .. проверьте это

Сделайте Html-страницу по умолчанию и проверьте ее там, она не сработает.

— Elyas Nice 10.12.2018 12:26

@ElyasNice, это работает .. Я редактировал href. попробуйте это

— Chandra Shekhar 10.12.2018 12:33

Нет, это не перенаправляет. @ чандра-шекхар

— Elyas Nice 10.12.2018 12:40

Я пробовал это в своей локальной системе. браузер Chrome. Могу ли я узнать, какой браузер вы используете, потому что это сработало для меня. проверьте href элемента привязки

— Chandra Shekhar 10.12.2018 12:43

Добавили HTML-код после javascript. Он перенаправляет, но не показывает анимацию

— Elyas Nice 10.12.2018 12:50

добавьте css перед тегами body и script после того, как он должен работать нормально. Можете ли вы создать скрипку на jsfiddle.net

— Chandra Shekhar 10.12.2018 12:52
ссылка на сайт Загрузите свой код. Посмотрите, эффект ряби не появляется
— Elyas Nice 10.12.2018 12:58

консоль показывает ошибку. Вы пропустили часть кода js, пожалуйста, проверьте

— Chandra Shekhar 10.12.2018 13:04

Позвольте нам продолжить обсуждение в чате.

— Elyas Nice 10.12.2018 13:26
10.12.2018 12:21

Измените свой css на следующий

(function() { var cleanUp, debounce, i, len, ripple, rippleContainer, ripples, showRipple;

debounce = function(func, delay) {
  var inDebounce;
  inDebounce = undefined;
  return function() {
    var args, context;
    context = this;
    args = arguments;
    clearTimeout(inDebounce);
    return inDebounce = setTimeout(function() {
      return func.apply(context, args);
    }, delay);
  };
};

showRipple = function(e) {
  var pos, ripple, rippler, size, style, x, y;
  ripple = this;
  rippler = document.createElement('span');
  size = ripple.offsetWidth;
  pos = ripple.getBoundingClientRect();
  x = e.pageX - pos.left - (size / 2);
  y = e.pageY - pos.top - (size / 2);
  style = 'top:' + y + 'px; left: ' + x + 'px; height: ' + size + 'px; width: ' + size + 'px;';
  ripple.rippleContainer.appendChild(rippler);
  return rippler.setAttribute('style', style);
};

cleanUp = function() {
  while (this.rippleContainer.firstChild) {
    this.rippleContainer.removeChild(this.rippleContainer.firstChild);
  }
};

ripples = document.querySelectorAll('[ripple]');

for (i = 0, len = ripples.length; i < len; i++) {
  ripple = ripples[i];
  rippleContainer = document.createElement('div');
  rippleContainer.className = 'ripple--container';
  ripple.addEventListener('mousedown', showRipple);
  ripple.addEventListener('mouseup', debounce(cleanUp, 2000));
  ripple.rippleContainer = rippleContainer;
  ripple.appendChild(rippleContainer);
}
 }());
.bg--red {
  background-color: #e74c3c;
}
.tx--red {
  color: #e74c3c;
}
.bg--blue {
  background-color: #00f;
}
.tx--blue {
  color: #00f;
}
.bg--green {
  background-color: #2ecc71;
}
.tx--green {
  color: #2ecc71;
}
.bg--white {
  background-color: #fff;
}
.tx--white {
  color: #fff;
}
body {
  color: #777;
  text-align: center;
  padding: 0 0 0 0;
  margin: 40px 0 0 0;
}
a {/**change the style on the link not the button**/
  border: none;
  padding: 20px;
  margin: 10px;
  font-size: 14px;
  outline: 0;
  box-shadow: 0px 2px 4px 0px #000;
  border-radius: 4px;
  text-decoration:none;/**remove the link underline**/
}
a:active {/**probabily don't need this**/
  box-shadow: 0px 2px 6px 0px #000;
}
[ripple] {
  position: relative;
  overflow: hidden;
}
[ripple] .ripple--container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
[ripple] .ripple--container span {
  transform: scale(0);
  border-radius: 100%;
  position: absolute;
  opacity: 0.75;
  background-color: #fff;
  animation: ripple 1000ms;
}
@-moz-keyframes ripple {
  to {
    opacity: 0;
    transform: scale(2);
  }
}
@-webkit-keyframes ripple {
  to {
    opacity: 0;
    transform: scale(2);
  }
}
@-o-keyframes ripple {
  to {
    opacity: 0;
    transform: scale(2);
  }
}
@keyframes ripple {
  to {
    opacity: 0;
    transform: scale(2);
  }
}
<div class = "content">
  <a  class = "bg--red tx--white" ripple = "ripple" href = "http://www.google.de">Fail</a>
  <a class = "bg--blue tx--white" ripple = "ripple"  href = "http://www.google.de">Info</a>
  <a class = "bg--green tx--white" ripple = "ripple"  href = "http://www.google.de">Save</a>
</div>

@madalinivascua Создайте страницу Html по умолчанию и проверьте ее там, она не будет работать

— Elyas Nice 10.12.2018 12:32

вам нужно поместить javascript после в html или обернуть свой код в функцию готовности документа

— madalinivascu 10.12.2018 12:33

@madalinivascua Если я это сделаю, в кнопке не будет отображаться анимация

— Elyas Nice 10.12.2018 12:43
10.12.2018 12:23

Другие вопросы по теме

Как загрузить изображение с помощью ajax с проверкой jquery в CodeIgniter?
Доступ к атрибуту данных select2 html
Проблема с повторением функции jQuery
Флажок Ruby со значком теперь показывает / скрывает div при переключении
Получить индекс элемента, исключая элемент с определенным классом?
Как запустить событие для параметра атрибута страницы в wordpress 5.0?
NodeJS req.body JSON есть, но нет значения
Как получить цвет шрифта или цвет текста значения td с помощью javascript или jquery
Значение таблицы данных Ajax не загружается в таблицу данных
Не может отправить значение ввода скрыто

Похожие вопросы

Проблема с использованием оператора if в функции
Странное сжатие HTML-изображения
Выбор первого вхождения элемента с определенным классом, если элемент не является непосредственным дочерним элементом, с использованием только CSS
Как добавить метод React к объекту вне React
При стирании персонажа возникает ошибка
Как начать выполнение кода javascript при загрузке страницы?
Скрипт Google отклоняет вставку ссылки Google в качестве ссылки @ google docs
Javascript, как фильтровать массив объектов, содержащий точное слово
Доступ к атрибуту данных select2 html
Как поймать событие загрузки для окна после location.replace (изменение URL)