Javascript JQuery动画:以不同于从上到下的速度从左到右设置DIV动画
尝试以一定的速度从左到右(和向后)设置1个DIV的动画,并以不同的速度从上到下(和向后)设置它的动画(基本上创建一个类似windows的屏幕保护程序效果) 问题是,每个动画都是一个接一个地出现的(很明显),但我一直在尝试组合,以便使图像沿对角线方向进行动画 来自CSS动画,这很容易,但它无法检测响应窗口的宽度/高度,因此反弹边变得非常不稳定 有什么想法吗?非常感谢 迄今为止的代码是:Javascript JQuery动画:以不同于从上到下的速度从左到右设置DIV动画,javascript,jquery,html,animation,Javascript,Jquery,Html,Animation,尝试以一定的速度从左到右(和向后)设置1个DIV的动画,并以不同的速度从上到下(和向后)设置它的动画(基本上创建一个类似windows的屏幕保护程序效果) 问题是,每个动画都是一个接一个地出现的(很明显),但我一直在尝试组合,以便使图像沿对角线方向进行动画 来自CSS动画,这很容易,但它无法检测响应窗口的宽度/高度,因此反弹边变得非常不稳定 有什么想法吗?非常感谢 迄今为止的代码是: $(document).ready(function() { updateWindowsize();
$(document).ready(function() {
updateWindowsize();
$(window).resize(function() {
updateWindowsize();
});
bounceBounce();
});
var imageWidth = '540'
imageHeight = '705'
function updateWindowsize() {
var $window = $(window);
windowHeight = $window.height();
windowWidth = $window.width();
}
function bounceBounce() {
$('.div-1').animate({"left": windowWidth - imageWidth}, 3000, 'linear',
function(){ $(this).animate({left: 0}, 3000, 'linear');
});
$('.div-1').animate({"top": windowHeight - imageHeight}, 6000, 'linear',
function(){ $(this).animate({top: 0}, 6000, 'linear');
});
bounceBounce();
};
你试过这个吗:
$('.div-1').animate({"left": windowWidth - imageWidth, "top": windowHeight - imageHeight}, 6000, 'linear',
function(){ $(this).animate({left: 0, top: 0}, 6000, 'linear');
});