我在div中放置了一个动画div,我只希望这个div能够在它的父级空间中移动。我该怎么做呢?
简单地说:我想要青蛙里面的青蛙。
HTML
<div id="frogger"> <!-- Animate start -->
<button id="left">«</button> <button id="right">»</button>
<div id="frog">
</div>
</div> <!-- Animate end -->
CSS
#frogger
{
width: 500px;
height: 500px;
border: solid;
margin: 0 auto;
}
#frog
{
position:relative;
background-color:#abc;
left:50px;
width:90px;
height:90px;
margin:5px;
}
的Javascript
$("#right").click(function(){
if ($(':animated').length) {
return false;
} else {
$("#frog").animate({"left": "+=50px"}, {queue: false}, "slow");
}
});
$("#left").click(function(){
if ($(':animated').length) {
return false;
} else {
$("#frog").animate({"left": "-=50px"}, {queue: false}, "slow");
}
});
答案 0 :(得分:0)
一种方法是测试当前位置,如果它太靠近边缘则不移动:
var $frog = $("#frog");
$("#right").click(function(){
if (parseInt($frog.css('left')) >= 400 || $(':animated').length) {
return false;
} else {
$frog.animate({"left": "+=50px"}, {queue: false}, "slow");
}
});
$("#left").click(function(){
if (parseInt($frog.css('left')) < 50 || $(':animated').length) {
return false;
} else {
$frog.animate({"left": "-=50px"}, {queue: false}, "slow");
}
});
当然,你可以通过编程方式确定青蛙及其容器的宽度,使其更加健壮,但为了快速演示,我只是硬编码了相应的左右边界数字。
答案 1 :(得分:0)
是的,您需要进行一些简单的碰撞检测,遗憾的是,仅凭CSS不允许您这样做。但你可以动态地这样做:
$("#right").click(function(){
var frog_right = $("#frog").offset().left + $("#frog").width();
var frogger_right = $("#frogger").offset().left + $("#frogger").width();
if ($(':animated').length || frog_right >= frogger_right ) {
return false;
} else {
$("#frog").animate({"left": "+=50px"}, {queue: false}, "slow");
}
});
$("#left").click(function(){
var frog_left = $("#frog").offset().left;
var frogger_left = $("#frogger").offset().left;
if ($(':animated').length || frog_left <= frogger_left) {
return false;
} else {
$("#frog").animate({"left": "-=50px"}, {queue: false}, "slow");
}
});