js实现鼠标点击处出现漂浮的红心

魏亚强

于 2019-06-21 21:50:34 发布

阅读量1.4k

点赞数 2

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/wyq188945/article/details/93237504

版权

前端专栏收录该内容

22 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>练习</title>
	</head>
	<body>
		<div id="div"></div>
	</body>
	 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<script>
		var height=$(Window).width();
		$("#div").css({
			'height':height,			
		})
		$("#div").click(function(e){
			var tem="<p>❤</p>";
			var x=e.pageX;
			var y=e.pageY;
			$(this).append(tem);
			$("p").css({
				"z-index": 9999,
				'position':'absolute',
				'top':y-20,
				'left':x,
				'color':'red'
			})			
			$("p").animate({
				'top':y-300,
				'opacity':0,
				'fontSize':'50px',
			},1000,function(){
				$(this).empty()
			})
		})
	</script>
</html>

练习