JQuery hands-on speed games-zhudi tornado and jquery tests
(-1) Preface
I used chrome49, jquery3.0, And I got 399 points. Believe it or not.
(1) design ideasThe two p elements are placed in the div. the height and width of each p element are the same as those of the div. When the mouse is placed on the div, the first p moves up (changing the marginTop value ), when the mouse leaves the div, the first p moves down.
(2) knowledge reserve a.: nth-child# Lol p: nth-child (1). If the first element is p, the match is successful.
# Lol: nth-child (1) 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.0.js"> </script>
<Link rel = "shortcut icon" href = "favicon. ico" 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 = $ lol. children (). first (),
$ Score = $ ("# score ");
$ Lol. centerPos ();
$ Lol. hover (function ()
{
$ OneP. animate ({marginTop:-$ oneP. height ()}, 400)
}, Function ()
{
Var number = -parseInt($oneP.css ("marginTop "));
If (number = $ oneP [0]. offsetHeight)
{
Number = 0;
}
$ (Score). text (number );
$ OneP. stop (true, false). animate ({marginTop: 0}, 400 );
})
})
$. Fn. centerPos = function ()
{
Var parent;
This. each (function (index)
{
Parent = this. parentNode;
If (parent = document. body)
{
Parent = window;
}
Var position = watermark (this).css ("position ");
If (position = "fixed" | position = "absolute ")
{
Attributes (this).css ("left", ($ (parent). width ()-this. offsetWidth)/2 + "px ")
. Css ("top", ($ (parent). height ()-this. offsetHeight)/2 + "px ");
}
Else
{
Window. console. error ("no valid position value is set ");
}
})
Return this;
}
</Script>
</Head
<Body>
<Div> current score: <span id = "score"> 0 </span> </div>
<Div id = "lol">
<P> </p>
<P> </p>
</Div>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
