JQuery手速测试小游戏实现思路详解

时间：2021-05-26

(-1)写在前面

我用的chrome49，jquery3.0，我得到过399分，信不信由你。

(1)设计思路

两个p元素放在div里，每个p元素的高度和宽度都和div一样，当鼠标放在div上时，第一个p向上移动(更改marginTop值)，当鼠标离开div上时，第一个p向下移动。

(2)知识储备

a. :nth-child

　　#lol p:nth-child(1),当前元素p相对于他的父元素的所有子元素，如果第一个元素是p则匹配成功。

　　#lol :nth-child(1) 相当于#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("没有设置有效的position值");}})return this;} </script></head<body><div>当前得分：<span id="score">0</span>分</div><div id="lol"><p></p><p></p></div></body> </html>

以上所述是小编给大家介绍的JQuery手速测试小游戏实现思路详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章