效果图:当鼠标触碰时水果会消失
利用了元素上树
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*
{
margin: 0;
padding: 0;
}
p
{
position: absolute;
width: 100px;
height: 100px;
background-color: chartreuse;
border-radius: 0px 300px 0px 300px;
}
</style>
</head>
<body>
<script src="js/jquery.min.js"></script>
<script>
var colorArr = ["yellow","orange","blue","green","red","cyan","purple"];
setInterval(function ()
{
var x = parseInt(Math.random() * (document.documentElement.clientWidth - 100));
var index = parseInt(Math.random()*7);
$("<p></p>").css(
{
"left" : x,
"top" : -100,
"background" : colorArr[index]
}).appendTo("body").animate(
{
"top" : 800,
"transform" : "rotateX(360deg) rotateY(360deg) rotateZ(360deg)"
}, 2000);
},10);
//事件委托
$("body").delegate("p", "mouseenter", function ()
{
$(this).remove();
});
</script>
</body>
</html>