实现鼠标点击图片产生水波纹效果的 JavaScript 代码

admin • • 建站运维 • 155 阅读

HTML:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Click Ripple Effect</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #container {
      position: relative;
    }

    img {
      max-width: 100%;
    }

    .ripple {
      position: absolute;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, .6);
      animation-name: ripple-animation;
      animation-duration: 1s;
      animation-timing-function: ease-out;
    }

    @keyframes ripple-animation {
      from {
        transform: scale(1);
        opacity: .6;
      }

      to {
        transform: scale(4);
        opacity: 0;
      }
    }
  </style>
</head>

<body>
  <div id="container">
    <img src="your-image.jpg" alt="Your Image">
  </div>

  <script src="ripple.js"></script>
</body>

</html>

JS:

 

// 获取图像和容器元素
var container = document.getElementById('container');
var img = container.querySelector('img');

// 添加点击事件监听器
container.addEventListener('click', function(e) {
    
   // 计算点击位置相对于容器的位置坐标
   var x = e.pageX - container.offsetLeft;
   var y = e.pageY - container.offsetTop;

   // 创建水波纹元素
   var ripple = document.createElement('div');
   ripple.classList.add('ripple');
   ripple.style.left = x + 'px';
   ripple.style.top = y + 'px';

   // 添加水波纹元素到容器中
   container.appendChild(ripple);

   // 在动画完结时删除水波纹元素
   setTimeout(function() {
      container.removeChild(ripple);
   }, 1000);
});

这个代码会在图片容器中监听点击事件，当用户点击图片时，在鼠标位置创建一个基于 CSS 动画的水波纹效果。根据需要，你可以更改水波纹的样式和动画参数来实现不同的效果。

版权声明：
作者：admin
链接：http://dvphp.net/?p=190
来源：动网资源网
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>