Question

我有一棵树，其上面放着其他较小的图像。现在，当树长大时，我希望较小的图像改变位置以保持在树的边缘。我该怎么做呢？

这是我的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;}

Answer 1

在说完其他内容之前，您需要停止使用pixels并开始使用percentages，如果您想要像您那样想要动态重新调整大小的内容。

如何保持图像的动态位置

1 个答案: