40 lines
1.2 KiB
HTML
40 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
|
|
|
<title>涟漪特效按钮</title>
|
|
<link rel="stylesheet" href="../css/54.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="btn-box">
|
|
<button>点赞</button>
|
|
<button>关注</button>
|
|
<button>收藏</button>
|
|
<button>转发</button>
|
|
</div>
|
|
<script type="text/javascript">
|
|
// 获取所有按钮对象
|
|
const btns=document.querySelectorAll("button");
|
|
// 循环所有按钮,并为每一个按钮添加点击事件
|
|
btns.forEach(btn=>{
|
|
btn.addEventListener("click",e=>{
|
|
// 创建span元素,并设置其位置为鼠标点击的位置
|
|
let span=document.createElement("span");
|
|
span.style.left=e.offsetX+"px";
|
|
span.style.top=e.offsetY+"px";
|
|
// 将span元素添加到按钮标签里
|
|
btn.appendChild(span);
|
|
// 1秒后删除span元素
|
|
setTimeout(() => {
|
|
span.remove();
|
|
}, 1000);
|
|
})
|
|
})
|
|
</script>
|
|
</body>
|
|
|
|
</html> |