jQuery实现小游戏速度测试的详细解决方案

（- 1）写在



我用chrome49，jquery3.0，我得了399分，相信或不相信。



（1）设计思想



两个P元素放置在部P元素具有相同的高度和宽度为Div.当鼠标放在div，第一P上移（改变margintop值）。当鼠标离开div时，第一个p下移。



（2）知识储备



答：第N个孩子



# LOL P：nth-child（1），当前元素P与他所有的父元素的子元素，如果第一个元素是磷，匹配成功。



#哈哈：nth-child（1）相当于# lol：nth-child（1）



（3）代码










为了生活

*
{
保证金：0px；
填充：0；
}
体
{
位置：绝对；
}
# LOL
{
宽度：400px；
身高：400px；
位置：绝对；
溢出：隐藏；
光标：指针；
}
# LOL P
{
宽度：400px；
身高：400px；
}
# LOL P：nth-child（1）
{
背景：蓝色；
}
# LOL P：nth-child（2）
{
背景：橙色；
}


$（函数（））
{
哈哈= $（var $ #哈哈），
lol.children ONEP美元=美元（）弗斯特（），
得分= $（美元#得分）；
lol.centerpos美元（）；
lol.hover美元（功能（）
{
onep.animate美元（{ margintop：$ onep.height（）}，400）
}函数（）
{
VaR值= - parseInt（$ onep.css（margintop ））；
If (number = $oneP{0}.offsetHeight)
{
数字= 0；
}
$（分数）。文本（数字）；
onep.stop美元（真、假）。动画（{ 0 }，margintop：400）；
}）
}）
fn.centerpos =函数（）美元。
{
VaR的父母；
this.each（函数（指数））
{
this.parentnode母=；
如果（父=文档，主体）
{
父窗口；
}
var位置= $（这个）。Css（位置）；
如果（位置= =固定的位置= =绝对| |）
{
$（这）。Css（左），（$（母），Width（）这个。offsetwidth）/ 2 +PX）
CSS（顶），（$（母），Height（）这个。offsetheight）/ 2 +PX）；
}
其他的
{
Window.console.error（没有有效的位置设定值）；
}
}）
返回此；
}

< /头

目前得分：0分








以上是萧边给你介绍jQuery的手速测试小游戏的实现细节，希望对你有帮助，如果您有任何问题，请给我留言，萧边会及时回复您。谢谢您支持网站。