我希望使用jquery/javascript实现以下动画。我有一个宽度为2000px,高度为200px的图片。我想从左到右对图像进行动画处理,直到它到达一端,然后从右到左。这应该继续给全景。如何从左到右和从右到左动画背景图像
我在互联网上试过[下面的脚本] [1],但它只能用于oneide。我想要一个平移效果。 请咨询。谢谢
;(function(){
$.fn.autoBackgroundScroll = function(options) {
var opts = $.extend({}, $.fn.autoBackgroundScroll.defaults, options);
var $backslider = $(this);
var duration = opts.duration;
var speed = opts.speed;
var imageWidth = opts.imageWidth;
var imageHeight = opts.imageHeight;
var direction1 = opts.direction1;
var direction2 = opts.direction2;
var posX = 0;
var posY = 0;
scroll(duration, speed, direction1, direction2);
function scroll(duration, speed, direction1, direction2){
setInterval(function(){
if(direction1 == 'right'){
moveRight();
if(direction2 == 'top'){
moveTop();
}
if(direction2 == 'bottom'){
moveBottom();
}
} else if(direction1 == 'left'){
moveLeft();
if(direction2 == 'top'){
moveTop();
}
if(direction2 == 'bottom'){
moveBottom();
}
} else if(direction1 == 'bottom'){
moveBottom();
if(direction2 == 'right'){
moveRight();
}
if(direction2 == 'left'){
moveLeft();
}
} else if(direction1 == 'top'){
moveTop();
if(direction2 == 'right'){
moveRight();
}
if(direction2 == 'left'){
moveLeft();
}
}
$backslider.css('background-position', posX + 'px ' + posY + 'px');
function moveTop(){
if(posY <= -imageHeight){
posY = 0;
}
posY -= speed;
}
function moveRight(){
if(posX >= imageWidth){
posX = 0;
}
posX += speed;
}
function moveBottom(){
if(posY >= imageHeight){
posY = 0;
}
posY += speed;
}
function moveLeft(){
if(posX <= -imageWidth){
posX = 0;
}
posX -= speed;
}
}, duration);
}
}
$.fn.autoBackgroundScroll.defaults = {
direction1: 'right',
direction2: '',
duration: 1,
speed: 0.5
};
})(jQuery);
向我们展示你到现在 – CaptainHere
你可以做到这一点与CSS过渡什么样的代码 - 只需创建一个从变化的背景位置的转变0至100% – eithed
@eithed'背景位置:100%0'将背景移出视图 – Justinas