使用jQuery实现点击页面时，出现心型特效，几秒后消失的效果案例

最新推荐文章于 2022-11-14 23:31:23 发布

Mr.小朱同学

最新推荐文章于 2022-11-14 23:31:23 发布

阅读量1.6k

点赞数 3

分类专栏： Web前端笔记文章标签： jQuery 心型特效

本文链接：https://blog.csdn.net/qq_39826207/article/details/90613643

版权

Web前端笔记专栏收录该内容

36 篇文章 7 订阅 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

本文通过jQuery展示了如何在页面上实现一个简单的点击显示心型特效，点击后几秒自动消失。首先创建一个demo.html文件，设定body高度，然后编写jQuery代码实现效果。打开文件后，点击页面会呈现心型动画。

摘要由CSDN通过智能技术生成

首先呢，实现这个特效使用的技术是前端技术jQuery，实现代码只需几十行即可。

第一步创建一个demo.html文件，给body设置一个高度，这里如果body如果没有设置高度的话，不会看到效果。

html页面创建完成之后，写入如下代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>心型特效</title>
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<script>
		$(function(){
			$("body").click(function(e){
				// 创建div父元素
				var parentDiv = $("<div></div>");
				// 设置属性
				parentDiv.css({
					"width":"20px",
					"height":"20px",
					"position":"absolute",
					"z-index":"1