jquery制作html小游戏,JQuery手速测试小游戏实现思路详解

(-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) 代码

为了生活

*

{

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;

}

$(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;

}

当前得分： 0分

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