Question

我有一个带有图像背景的div，另一个以透明开头的div。我想在上面的duiv中褪色的png背景中滑动，更改背景并向外滑动以显示它。

我编码了这个，问题是序列。结构slide_in，更改背景，slide_out随机混合。

var step = 20;                 // How many pixels to move per step
var current = -1920;            // The current pixel row
var imageWidth = 1920;        // Background image width
var headerWidth = 960;        // How wide the header is.
var init;

function slide_in(){
    current += step;
$('#bgfade').css("background-position",current+"px 0");
if(current==0) clearInterval(init);
}

var outstep = 20;                 // How many pixels to move per step
var outcurrent = 0;            // The current pixel row
var outimageWidth = 1920;        // Background image width
var outheaderWidth = 960;        // How wide the header is.
var outinit;

function slide_out(){
outcurrent -= step;
$('#bgfade').css("background-position",outcurrent+"px 0");
if(outcurrent==0) clearInterval(outinit);
}

$('#bgfade').click(function(){        
init = setInterval(slide_in, 1);
$('#bg').css('background-image','url(images/photo2.jpg)');
outinit = setInterval(slide_out, 1);
});

当点击事件发生时，首先发生的事情是图像在背景开始滑出之后发生变化，但它从未滑入

Answer 1

我找到了使用此插件的解决方案：http://www.protofunc.com/scripts/jquery/backgroundPosition/

滑动背景封面并更改覆盖的背景图像

1 个答案: