我有一棵树，上面放着其他较小的图像。现在，当树长大时，我希望较小的图像改变位置以留在树的边缘。我该怎么做呢？
这是我的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;}
最佳答案
在说任何其他事情之前，如果您想要像您一样动态调整大小的内容，您需要停止使用像素并开始使用百分比。
关于jquery - 如何保持图像动态的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13531947/