您好，我有一个随机移动的 gif，但问题是我不希望它能够超出宽度 100% 高度 100%； , 我怎样才能避免这种情况？
html
<body>
<div id='background'></div>
<div id='waterfallframe'>
<img src="waterfall.gif" id='waterfall'></div>
</div>
</body>
j查询
$("#waterfall").on({
mouseover:function(){
$(this).animate({
left:(Math.random()*700)+"px",
top:(Math.random()*700)+"px",
width:"+=1px",
height:"+=1px",
},100);
}
});
最佳答案
我在 javascript 中做的不多，所以可能有更简洁的方法来实现这一点。
但是从数学的 Angular 来看，您要做的是将 left 和 top 值限制为屏幕内的值。 您可以通过获取屏幕宽度并减去图像宽度来获得这些值。
计算应该是这样的:
left:(Math.random()*(window.innerWidth - $("#waterfall").clientWidth)
top:(Math.random()*(window.innerHeight - $("#waterfall").clientHeight)
如果你想测试看看这会产生预期的结果，你可以去掉随机部分，让它看起来像这样:
left:((window.innerWidth - $("#waterfall").clientWidth)
top:((window.innerHeight - $("#waterfall").clientHeight)
这导致图像处于随机生成的最大可能位置。
作为一个公式，为了将来使用，它类似于:
minimumX + randomScaleFactorBetween0and1*(maximumX - minimumX - widthOfObject)
希望对您有所帮助。
关于jquery - 限制元素在 jquery 中的移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25386087/