主页 / 问题 / 1041900
Accepted
DmitryDevelop
Asked:2020-11-03 22:12:16 +0000 UTC2020-11-03 22:12:16 +0000 UTC

鼠标点击效果（jQuery）怎么样？[关闭]

  • 772

不知道这个效果叫什么，但是当你点击按钮\链接的时候（标签比较短），你需要从鼠标填充到按钮上边缘的效果

示例：youtube、youtube 登录按钮

在此处输入图像描述

在按钮上，从点击逐渐到边缘，还有另一个例子，桌面版的电报，几乎所有的按钮都是这样制作的

在此处输入图像描述 在此处输入图像描述

在此处输入图像描述 在此处输入图像描述 在此处输入图像描述

在按钮周围，有一个非常明显的例子 - https://dwstroy.ru/lessons/les3601/demo/index.html#

你需要这样的东西，但是为了让圆波不与文本重叠也不悬停，我真的不知道如何实现

还必须在单击鼠标时出现效果，但在单击后将鼠标移开时不会出现

这些是 ui 材料提供的按钮类型，但我需要一个干净的实现示例

javascript

2 个回答

  1. var buttons = document.getElementsByClassName('butt'),
  forEach = Array.prototype.forEach;

forEach.call(buttons, function(b) {
  b.addEventListener('click', addElement);
});

function addElement(e) {
  var addDiv = document.createElement('div'),
    mValue = Math.max(this.clientWidth, this.clientHeight),
    rect = this.getBoundingClientRect();
  sDiv = addDiv.style,
    px = 'px';

  sDiv.width = sDiv.height = mValue + px;
  sDiv.left = e.clientX - rect.left - (mValue / 2) + px;
  sDiv.top = e.clientY - rect.top - (mValue / 2) + px;

  addDiv.classList.add('pulse');
  this.appendChild(addDiv);
}
    .dws {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.butt {
  border: 3px solid #218294;
  font-size: 30px;
  color: #218294;
  text-decoration: none;
  text-transform: uppercase;
  width: 250px;
  height: 60px;
  display: block;
  text-align: center;
  line-height: 60px;
  font-family: Arial, sans-serif;
  position: relative;
  transition: .5s;
  overflow: hidden;
}

.butt::before,
.butt::after {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  background: #218294;
  top: 0;
  left: -100%;
  opacity: .5;
  transition: .3s;
  z-index: -1;
}

.butt::after {
  opacity: 1;
  transition-delay: .2s;
}

.butt:hover {
  color: #fff;
}

.butt:hover::before,
.butt:hover::after {
  left: 0;
}

.pulse {
  background-color: aqua;
  border-radius: 50%;
  animation: pulse 0.7s ease-out;
  transform: scale(0);
  position: absolute;
}

@keyframes pulse {
  to {
    transform: scale(2);
    background-color: #fff;
    opacity: 0;
  }
}
    <div class="dws">
  <a href="#" class="butt">button</a>
</div>

    • 2
  2. Best Answer

    $(document).on('click', '.waves', function(e) {
    if ($(this).hasClass('disabled')) return;

    const offset = $(this).offset();

    const eventX = e.pageX - offset.left;
    const eventY = e.pageY - offset.top;

    const diameter = Math.min(this.offsetHeight, this.offsetWidth, 50);

    const ripple = $('<div/>', {class: "wavesWrapper", appendTo: $(this)});

    $('<div/>', {
        class: "wavesEffect",
        css: {
            width: diameter,
            height: diameter,
            left: eventX - (diameter / 2),
            top: eventY - (diameter / 2),
        },
        appendTo: ripple,
        one: {
            animationend: function () {
                ripple.remove();
            }
        }
    });
});
    body {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn {
	display: inline-block;
	border: 1px solid #ccc;
	padding: 18px 40px;
	cursor: pointer;
	margin: 10px;
	user-select: none;
	text-align: center;
}

.btn.btn-dark {
	background-color: #2c3e50;
	color: #fff;
}

.btn.btn-red {
	background-color: #e74c3c;
	color: #fff;
}

.btn.btn-blue {
	background-color: #3498db;
}

.btn.btn-block {
	display: block;
}

.waves {
	position: relative;
}

.waves .wavesWrapper {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	overflow: hidden;
	transform: translateZ(0);
	border-radius: inherit;
	pointer-events: none;
	animation: waves-shadow 2s ease;
}

.waves .wavesEffect {
	backface-visibility: hidden;
	position: absolute;
	border-radius: 50%;
	transform: scale(0.7);
	background-color: #e74c3c;
	opacity: 0.4;
	animation: waves 2s;
}

.waves.waves-dark .wavesEffect {
	background-color: #000;
}

.waves.waves-light .wavesEffect {
	background-color: #fff;
}

.waves.waves-darken .wavesEffect {
	background-color: rgba(0, 0, 0, 0.2);
}

.waves.waves-without-shadow .wavesWrapper {
	animation: none;
}

@keyframes waves-shadow {
	0% {
		box-shadow: 0 0 0 transparent;
	}

	20% {
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
	}

	100% {
		box-shadow: 0 0 0 transparent;
	}
}

@keyframes waves {
	to {
		transform: scale(10);
		opacity: 0;
	}
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
	<div class="btn btn-dark waves waves-light">BUTTON</div>
	<div class="btn btn-red waves waves-dark">BUTTON</div>
	<div class="btn waves">BUTTON</div>
	<div class="btn btn-block btn-dark waves waves-light">BUTTON</div>
	<div class="btn btn-block btn-red waves waves-dark">BUTTON</div>
	<div class="btn btn-block waves">BUTTON</div>
</div>

    我已经这样做了很长时间了。

    我申请 SASS：CodeOpen

    .wavesWrapper - 包装器。 .wavesEffect - 效果本身，一个圆圈。

    .wavesWrapper animataion - 元素上的阴影动画，可以移除。 .wavesEffect 动画- 圆形增加动画，可以加快或减慢动画，另外可以增加@keyframes中的scale()大小，使圆形完全覆盖元素。

    是的，一切似乎都在示例中，一些不同颜色的补丁，所以请为自己定制。

    • 2

相关问题