我有一个固定的背景图像附加到body标签,图像是2048px乘2048px并且是顶部居中:
body { background: url(images/background.jpg) 50% 0% no-repeat fixed; }
我想在背景中添加一些动作,以便在观众浏览网站时平移整个图像
使用:https://github.com/brandonaaron/jquery-cssHooks/blob/master/bgpos.js来规范化背景位置属性,我可以按如下方式设置图像的动画:
$('body').animate({ backgroundPositionX: '100%', backgroundPositionY: '100%' }, 10000, 'linear');
我想要添加随机移动,而不是在10秒内向右下方移动.
使用设置间隔我可以每隔10秒为图像设置动画,但如何确定背景位置百分比?当图像移动时,它应该是相同的速度,只是随机位置
var currX = 50; var currY = 0; $(function () { animate(); window.setInterval(animate(), 10000); }); function animate() { var newPosX = currX - (Math.random() * 50); var newPosY = currY - (Math.random() * 50); $('body').animate({ backgroundPositionX: newPosX + '%', backgroundPositionY: newPosY + '%' }, 10000, 'linear'); }
编辑:更好地描述我想做的事情的小提琴:http://jsfiddle.net/97w7f3c8/4/
只是一个如何做到的例子.通过随机角度选择随机方向,然后检查目的地是否超出0到100的范围(可能没有必要)
$(function() {
var p = [0, 0], speed = 10, runMe = function () {
var angle = Math.random() * 2 * Math.PI;
var d = [
speed * Math.cos(angle),
speed * Math.sin(angle)
];
for (var i = 0; i < 2; i++)
p[i] = (p[i] + d[i] > 100 || p[i] + d[i] < 0) ? p[i] - d[i] : p[i] + d[i];
$('body').animate({
backgroundPositionX: p[0] + '%',
backgroundPositionY: p[1] + '%'
}, 5000, 'linear', runMe);
};
runMe();
});
body {
background: url(http://www.psdgraphics.com/file/colorful-triangles-background.jpg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script src="https://github.com/brandonaaron/jquery-cssHooks/blob/master/bgpos.js">
</script>