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;
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");
divmain.setAttribute("id", "love");
divmain.setAttribute("class", "love");
first.setAttribute("id", "first");
second.setAttribute("id", "second");
divmain.appendChild(first);
divmain.appendChild(second);
divmain.style.cssText = "top:" + e.pageY + "px;left:" + e.pageX + "px";
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>