JQuery手速テストゲーム実現構想詳細
2257 ワード
(-1)前に書く
私が使っているchrome 49、jquery 3.0、私は399点を得たことがあります.信じるかどうかはあなた次第です.
(1)設計構想
2つの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)コード
私が使っているchrome 49、jquery 3.0、私は399点を得たことがあります.信じるかどうかはあなた次第です.
(1)設計構想
2つの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)コード
$(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