兩個(gè)p元素放在div里，每個(gè)p元素的高度和寬度都和div一樣，當(dāng)鼠標(biāo)放在div上時(shí)，第一個(gè)p向上移動(dòng)(更改marginTop值)，當(dāng)鼠標(biāo)離開(kāi)div上時(shí)，第一個(gè)p向下移動(dòng)。

(2)知識(shí)儲(chǔ)備

a. :nth-child

　　#lol p:nth-child(1),當(dāng)前元素p相對(duì)于他的父元素的所有子元素，如果第一個(gè)元素是p則匹配成功。

　　#lol :nth-child(1) 相當(dāng)于#lol *:nth-child(1)

(3) 代碼

<!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>為了生活</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 = $(this).css("position");
if(position == "fixed" || position=="absolute")
{
$(this).css("left",($(parent).width()-this.offsetWidth)/2+"px")
.css("top",($(parent).height()-this.offsetHeight)/2+"px");
}
else
{
window.console.error("沒(méi)有設(shè)置有效的position值");
}
})
return this;
} 
</script>
</head
<body>
<div>當(dāng)前得分：<span id="score">0</span>分</div>
<div id="lol">
<p></p>
<p></p>
</div>
</body> 
</html>

以上所述是小編給大家介紹的JQuery手速測(cè)試小游戲?qū)崿F(xiàn)思路詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: