我有一棵树，上面放着其他较小的图像。现在，当树长大时，我希望较小的图像改变位置以保持在树的边缘。我该怎么做呢？
这是我的 javascript
var target = [ {gift : '<p class="gifts one"></p>'},{gift: '<p class="gifts two"></p>'}, {gift : '<p class="gifts three"></p>'},{gift : '<p class="gifts four"></p>'},{gift: '<p class="gifts five"></p>'},{gift:'<p class="gifts six"></p>'},{gift:'<p class="gifts seven"></p>'}];
var currIndex = 0;
function gifFunc(){$('#gifts').append(target[currIndex].gift);currIndex ++;}
$("#add-gift").click(function(){$('#tree').animate({'width':'+=10px'}, 1000);
gifFunc();
});
这是HTML：
<html>
<body>
<div id="Page-cont">
<div id="form"><button id="add-gift">Add gift</button></div>
<div id="img-sec">
<img src="http://i.imgur.com/ujF7L.png" alt="Christmas Tree" width="250px" id="tree" />
<div id="gifts"></div>
<div class="clearfloat"></div>
</div>
</div>
</body>
</html>
这是CSS：
#Page-cont{width:100%;float:left;}
#form{width:40%;float:left;}
#img-sec{float:left;width:60%;}
#tree{position:relative;}
.gifts{background: url(http://www.rangde.org/images/christmas/gifts.png) -43px -70px no-repeat;height: 18px;width: 30px;position: absolute;}
.one{top: -330px;left: 160px;}
.two{top: -300px;left: 70px;}
.three{top: -130px;left: 140px;}
.four{top: -230px;left: 100px;}
.five{top: -280px;left: 200px;}
.six{top: -250px;left: 70px;}
.seven{top: -450px;left: 170px;}
.clearfloat {clear: both;height: 0;font-size: 1px;line-height: 0px;}
#gifts{position:absolute;}