JS实用的动画弹出层效果实例

JS实用的动画弹出层效果实例是一种常见的网页制作效果，它能够为网站增添一些动态效果，提高用户体验。在本篇攻略中，我将为大家详细讲解如何使用JavaScript实现这种动画弹出层效果。

准备工作

在开始制作之前，我们需要准备以下的工作：

1. 在HTML文件中，引入JavaScript代码文件。

<script src="popup.js"></script>

1. 在CSS文件中，定义动画效果的样式以及弹出层的样式。

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  display: none;
}

.popup--show {
  display: block;
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate3d(0, -10px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

实现动画弹出层效果

接下来，我们将详细讲解如何使用JavaScript代码实现动画弹出层效果。

1. 获取元素

首先，我们需要获取弹出层的元素以及触发弹出层的按钮的元素。

const popup = document.querySelector('.popup');
const popupButton = document.querySelector('.popup-button');

1. 给按钮添加事件监听

接着，我们需要为触发弹出层的按钮添加事件监听器。

popupButton.addEventListener('click', () => {
  popup.classList.add('popup--show');
});

1. 给弹出层添加关闭事件监听

最后，我们需要为弹出层添加关闭事件监听器，以便用户可以通过点击弹出层外的区域或者关闭按钮关闭弹出层。

popup.addEventListener('click', (event) => {
  if (event.target === popup || event.target.matches('.popup__close')) {
    popup.classList.remove('popup--show');
  }
});

示例说明

下面，我们将通过两个示例说明如何实现JS实用的动画弹出层效果。

示例一：图片弹出层

我们可以在网页中选择一张图片，当用户点击图片时，弹出一层的弹出层，展示图片。

HTML代码：

<div class="image">
  <img src="example.jpg" alt="example">
  <button class="image__button">查看图片</button>
</div>
<div class="popup">
  <img src="" alt="popup" class="popup__image">
  <button class="popup__close">关闭</button>
</div>

JavaScript代码：

const image = document.querySelector('.image');
const imageButton = document.querySelector('.image__button');
const popup = document.querySelector('.popup');
const popupImage = document.querySelector('.popup__image');

imageButton.addEventListener('click', () => {
  popupImage.src = image.querySelector('img').src;
  popup.classList.add('popup--show');
});

popup.addEventListener('click', (event) => {
  if (event.target === popup || event.target.matches('.popup__close')) {
    popup.classList.remove('popup--show');
  }
});

示例二：表单弹出层

我们可以在网页中添加一个表单，当用户点击“联系我们”按钮时，弹出一层的弹出层，展示表单。

HTML代码：

<div class="form">
  <button class="form__button">联系我们</button>
</div>
<div class="popup">
  <form>
    <label for="name">姓名</label>
    <input type="text" id="name" required>
    <label for="email">邮箱</label>
    <input type="email" id="email" required>
    <label for="message">留言</label>
    <textarea id="message" required></textarea>
    <button type="submit">提交</button>
  </form>
  <button class="popup__close">关闭</button>
</div>

JavaScript代码：

const form = document.querySelector('.form');
const formButton = document.querySelector('.form__button');
const popup = document.querySelector('.popup');

formButton.addEventListener('click', () => {
  popup.classList.add('popup--show');
});

popup.addEventListener('click', (event) => {
  if (event.target === popup || event.target.matches('.popup__close')) {
    popup.classList.remove('popup--show');
  }
});

popup.querySelector('form').addEventListener('submit', (event) => {
  event.preventDefault();
  // 处理表单提交
  popup.classList.remove('popup--show');
});

通过以上两个示例，我们可以发现，在实现JS实用的动画弹出层效果时，主要就是利用JavaScript代码对元素的显示和隐藏进行控制，并且通过CSS定义动画效果，从而使得用户在使用过程中可以获得更好的体验。