jQuery点击出现爱心特效
时间：2021-11-21 10:50:46|栏目：jquery|点击： 次
本文实例为大家分享了jQuery点击出现爱心特效的具体代码，供大家参考，具体内容如下
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>爱心效果</title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<style type="text/css">
#love {
width: 30px;
height: 30px;
/*border: 1px solid red;*/
position: absolute;
}
#first {
width: 15px;
height: 26px;
background-color: red;
position: absolute;
right: 3.2px;
bottom: 0;
transform: rotate(45deg);
border-radius: 10px 10px 1px 1px;
opacity: 1;
}
#second {
width: 15px;
height: 26px;
background-color: red;
position: absolute;
left: 3.2px;
bottom: 0;
transform: rotate(-45deg);
border-radius: 10px 10px 1px 1px;
opacity: 1;
}
</style>
</head>
<body></body>
<script type="text/javascript">
function random(lower, upper) {
return Math.floor(Math.random() * (upper - lower)) + lower;
}
var body = document.getElementsByTagName("body")[0];
document.onclick = function(e) {
var num = random(0, 19);
// 颜色数组
var color = ["peru", "goldenrod", "yellow",
"chartreuse", "palevioletred", "deeppink",
"pink", "palegreen", "plum",
"darkorange", "powderblue", "orangered",
"orange", "orchid", "red",
"aqua", "salmon", "gold", "lawngreen"
]
var divmain = document.createElement("div");
var first = document.createElement("div");
var second = document.createElement("div");
// 给div加属性
divmain.setAttribute("id", "love");
divmain.setAttribute("class", "love");
first.setAttribute("id", "first");
second.setAttribute("id", "second");
// 向最外层内添加内层div
divmain.appendChild(first);
divmain.appendChild(second);
// 根据鼠标位置来确定div的位置
//divmain.style.top = e.pageY + "px";
//divmain.style.left = e.pageX + "px";
divmain.style.cssText = "top:" + e.pageY + "px;left:" + e.pageX + "px";
// 给心形div加随机颜色
first.style.backgroundColor = color[num];
second.style.backgroundColor = color[num];
body.appendChild(divmain);
$(".love").animate({
opacity: "0",
top: "-=50px"
}, 1500);
}
// 利用定时器来清除页面的垃圾
setInterval(function() {
var div = document.getElementsByClassName("love");
var len = div.length;
var num;
for(var i = len - 1; i >= 0; i--) {
num = parseInt(div[i].style.opacity);
if(num <= 0) {
div[i].remove();
}
}
}, 3500);
</script>
</html>
