使用Javascript和CSS可以点击Ripple Buttons

loading...


0

我找到了一个脚本,在点击按钮时制作动画 . 问题是,它没有重定向到链接 .

(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>

我想制作Button Clickable . 如果单击其中一个按钮,它应重定向到链接 .

我的解决方案是添加一个javascript重定向函数,但我不想要它 . 我希望用 <a href=""> 成为可能

如果有人有解决方案,我会很高兴:)

loading...

4回答

  • 0

    你可以在 <button> 周围包裹 <a>

    <!-- 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>
    

  • 0

    试试这个....它在这里不起作用,因为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>
    

  • 2

    将您的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>
    

  • 0
    (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做了一些修改..检查一下

评论

暂时没有评论!