原生js实现点击出现文字并且移动

最新推荐文章于 2021-06-04 03:20:53 发布

江海i

最新推荐文章于 2021-06-04 03:20:53 发布

阅读量647

点赞数

文章标签：原生js实现点击出现文字并且移动

本文链接：https://blog.csdn.net/weixin_44289860/article/details/102715448

版权

<!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>

江海i

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生js实现点击出现文字并且移动

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p { position: absolute; display: none; } ...
复制链接

扫一扫