RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 1041900
Accepted
DmitryDevelop
DmitryDevelop
Asked:2020-11-03 22:12:16 +0000 UTC2020-11-03 22:12:16 +0000 UTC 2020-11-03 22:12:16 +0000 UTC

鼠标点击效果(jQuery)怎么样?[关闭]

  • 772
关闭 这个问题是题外话。目前不接受回复。

寻求调试帮助的问题(“为什么这段代码不起作用? ”)应该包括期望的行为、具体的问题或错误,以及在问题中重现它的最少代码。没有明确描述问题的问题对其他访问者毫无用处。请参阅如何创建一个最小的、独立的和可重现的示例。

2年前关闭。

改进问题

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

示例:youtube、youtube 登录按钮

在此处输入图像描述

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

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

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

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

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

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

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

javascript
  • 2 2 个回答
  • 10 Views

2 个回答

  • Voted
  1. USERNAME GOES HERE
    2020-11-03T22:29:45Z2020-11-03T22:29:45Z

    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
    MoloF
    2020-11-03T23:24:21Z2020-11-03T23:24:21Z

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

相关问题

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    根据浏览器窗口的大小调整背景图案的大小

    • 2 个回答
  • Marko Smith

    理解for循环的执行逻辑

    • 1 个回答
  • Marko Smith

    复制动态数组时出错(C++)

    • 1 个回答
  • Marko Smith

    Or and If,elif,else 构造[重复]

    • 1 个回答
  • Marko Smith

    如何构建支持 x64 的 APK

    • 1 个回答
  • Marko Smith

    如何使按钮的输入宽度?

    • 2 个回答
  • Marko Smith

    如何显示对象变量的名称?

    • 3 个回答
  • Marko Smith

    如何循环一个函数?

    • 1 个回答
  • Marko Smith

    LOWORD 宏有什么作用?

    • 2 个回答
  • Marko Smith

    从字符串的开头删除直到并包括一个字符

    • 2 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5