<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p {
position: absolute;
display: none;
}
body {}
</style>
</head>
<body>
<p>♥1♥</p>
<p>♥2♥</p>
<p>♥3♥</p>
<p>♥4♥</p>
<p>♥5♥</p>
<script type="text/javascript">
Height = document.documentElement.clientHeight;
Width = document.documentElement.clientWidth;
var ps = document.querySelectorAll('p');
var index = -1;
var body = document.body;
body.style.height = Height + "px";
body.style.width = Width + "px";
body.onclick = function() {
x = event.clientX;
y = event.clientY;
console.log(x);
console.log(y);
index++;
if(index > 4) {
index = 0;
}
ps[index].style.top = y + "px";
ps[index].style.left = x + "px";
ps[index].style.display = "block";
setInterval(function() {
ps[index].style.transition = "all 1s";
ps[index].style.top = y - 50 + "px";
}, 100);
setTimeout(function() {
ps[index].style.display = "none";
}, 500);
}
</script>
</body>
</html>
原生js实现点击出现文字并且移动
最新推荐文章于 2021-06-04 03:20:53 发布