(-1) Write in front
I used chrome49, jquery3.0, and I got 399 points, believe it or not.
(1) Design ideas
Two p elements are placed in the div, and the height and width of each p element are the same as the div. When the mouse is placed on the div, the first p moves upwards (change marginTop value), and when the mouse leaves the div, the first p moves downwards.
(2) Knowledge reserve
a. :nth-child
#lol p:nth-child(1), the current element p is relative to all child elements of its parent element. If the first element is p, the match will be successful.
#lol :nth-child(1) is equivalent to #lol *:nth-child(1)
(3) Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<script type="text/javascript" src="debug-jquery-3.0."></script>
<link rel="shortcut icon" href="" type="image/x-icon">
<title>For life</title>
<style type="text/css">
*
{
margin:0px;
padding:0;
}
body
{
position:absolute;
}
#lol
{
width:400px;
height:400px;
position:absolute;
overflow:hidden;
cursor:pointer;
}
#lol p
{
width:400px;
height:400px;
}
#lol p:nth-child(1)
{
background:blue;
}
#lol p:nth-child(2)
{
background:orange;
}
</style>
<script type="text/javascript">
$(function()
{
var $lol = $("#lol"),
$oneP = $().first(),
$score = $("#score");
$();
$(function()
{
$({marginTop:-$()},400)
},function()
{
var number = -parseInt($("marginTop"));
if(number == $oneP[0].offsetHeight)
{
number = 0;
}
$(score).text(number);
$(true,false).animate({marginTop:0},400);
})
})
$. = function()
{
var parent;
(function(index)
{
parent = ;
if(parent == )
{
parent = window;
}
var position = $(this).css("position");
if(position == "fixed" || position=="absolute")
{
$(this).css("left",($(parent).width()-)/2+"px")
.css("top",($(parent).height()-)/2+"px");
}
else
{
("No valid position value is set");
}
})
return this;
}
</script>
</head
<body>
<div>Current score：<span >0</span>point</div>
<div >
<p></p>
<p></p>
</div>
</body>
</html>
The above is a detailed explanation of the implementation ideas of JQuery manual speed test mini game introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!