📌  相关文章
📜  圆形边框反应原生 - Javascript(1)

📅  最后修改于: 2023-12-03 14:50:49.921000             🧑  作者: Mango

圆形边框反应原生 - Javascript

本文将介绍如何使用 Javascript 实现圆形边框反应动画效果。

前置知识

在阅读本文之前，需要掌握以下技能：

  • Javascript 的基础语法
  • HTML 和 CSS 的基础知识
  • JQuery 库的基本用法
效果预览

在开始编写代码之前，先来看一下最终实现的效果：

效果预览

实现步骤
1.添加 HTML 结构

首先，我们需要在 HTML 文件中添加一个 DIV 容器和一些 DIV 元素。

<div id="container">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

在这个例子中，我们创建了一个 ID 为 "container" 的 DIV 容器，并在其中添加了四个类名为 "circle" 的子元素 DIV。

2.添加 CSS 样式

接下来，我们需要为这些元素添加 CSS 样式。

#container {
  width: 500px;
  height: 500px;
  position: relative;
}

.circle {
  border: 1px solid #ccc;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

在这个例子中，我们为容器 DIV 添加了一个宽度和高度为 500px，并设置了它的 position 属性为 relative，这将使得子元素 DIV 的 position 属性可以相对于它来定位。

对于子元素 DIV，在设置圆形边框和大小时，我们使用了 border-radius 属性和 50% 的数值来实现。

3.添加 Javascript 代码

现在，我们需要使用 Javascript 代码来实现边框反应动画效果。我们可以使用 JQuery 库来简化代码编写。

首先，在 head 标签中引入 JQuery 库。

<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

然后，我们需要定义一个 Javascript 函数，用于创建动画效果。

function animateCircle(circle) {
  var radius = circle.width() / 2;
  var x = circle.offset().left + radius;
  var y = circle.offset().top + radius;
  var container = $("#container");

  var ripple = $("<div></div>");
  ripple.addClass("ripple");
  container.append(ripple);

  ripple.css({
    left: x,
    top: y,
    width: 0,
    height: 0,
    opacity: 0.5,
  });

  ripple.animate(
    {
      width: radius * 2,
      height: radius * 2,
      opacity: 0,
    },
    2000,
    function () {
      ripple.remove();
    }
  );
}

在这个函数中，我们首先获取一个 DIV 元素的半径、横纵坐标以及容器元素。然后，我们创建一个新的 DIV 元素并添加一个类名为 "ripple"，最后将这个元素添加到容器中。

接下来，我们使用 animate 函数实现动画效果。在 animate 函数的回调函数中，我们将新创建的元素移除。

最后，我们需要为每个子元素 DIV 添加一个点击事件，并在其中调用 animateCircle 函数。

$(".circle").on("click", function (e) {
  animateCircle($(this));
});
总结

在本文中，我们介绍了如何使用 Javascript 实现圆形边框反应动画效果。通过引入 JQuery 库和编写少量的 Javascript 代码，我们就可以轻松地实现这个效果。