JQuery手速测试小游戏实现思路详解
(-1)写在前面
我用的chrome49，jquery3.0，我得到过399分，信不信由你。
(1)设计思路
两个p元素放在div里，每个p元素的高度和宽度都和div一样，当鼠标放在div上时，第一个p向上移动(更改marginTop值)，当鼠标离开div上时，第一个p向下移动。
(2)知识储备
a.:nth-child
#lolp:nth-child(1),当前元素p相对于他的父元素的所有子元素，如果第一个元素是p则匹配成功。
#lol:nth-child(1)相当于#lol*:nth-child(1)
(3)代码
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset=utf-8>
<scripttype="text/javascript"src="debug-jquery-3.0.0.js"></script>
<linkrel="shortcuticon"href="favicon.ico"type="image/x-icon">
<title>为了生活</title>
<styletype="text/css">
*
{
margin:0px;
padding:0;
}
body
{
position:absolute;
}
#lol
{
width:400px;
height:400px;
position:absolute;
overflow:hidden;
cursor:pointer;
}
#lolp
{
width:400px;
height:400px;
}
#lolp:nth-child(1)
{
background:blue;
}
#lolp:nth-child(2)
{
background:orange;
}
</style>
<scripttype="text/javascript">
$(function()
{
var$lol=$("#lol"),
$oneP=$lol.children().first(),
$score=$("#score");
$lol.centerPos();
$lol.hover(function()
{
$oneP.animate({marginTop:-$oneP.height()},400)
},function()
{
varnumber=-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()
{
varparent;
this.each(function(index)
{
parent=this.parentNode;
if(parent==document.body)
{
parent=window;
}
varposition=$(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("没有设置有效的position值");
}
})
returnthis;
}
</script>
</head
<body>
<div>当前得分：<spanid="score">0</span>分</div>
<divid="lol">
<p></p>
<p></p>
</div>
</body>
</html>
以上所述是小编给大家介绍的JQuery手速测试小游戏实现思路详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！