js点击有扩散整个屏幕
时间: 2023-10-20 18:20:50 浏览: 43
您好,我可以回答您的问题。如果您想要实现点击后扩散整个屏幕的效果,可以使用以下代码:
```javascript
// 获取屏幕宽高
var screenWidth = window.innerWidth;
var screenHeight = window.innerHeight;
// 监听点击事件
document.addEventListener('click', function(e) {
// 创建元素
var circle = document.createElement('div');
circle.classList.add('circle');
document.body.appendChild(circle);
// 设置圆的初始位置和大小
var x = e.clientX;
var y = e.clientY;
circle.style.left = x + 'px';
circle.style.top = y + 'px';
circle.style.width = '0';
circle.style.height = '0';
// 动画效果
var size = Math.max(screenWidth, screenHeight) * 2;
circle.style.transition = 'all .5s ease-out';
circle.style.transform = 'translate(-50%, -50%) scale(' + (size / 100) + ')';
// 删除元素
setTimeout(function() {
circle.parentNode.removeChild(circle);
}, 500);
});
```
这段代码会监听整个文档的点击事件,创建一个圆形元素,并在点击位置显示。然后通过 CSS 动画实现圆的扩散效果,最后删除圆形元素。您可以根据自己的需要修改代码中的样式和动画参数。希望能对您有所帮助。