根据倒计时时间更改图像位置的脚本

Question

我正在寻找一种方法（JavaScript或jQuery）让计时器脚本改变div中背景或常规图像的位置。 有很多现有的倒计时脚本，但他们不让我做我想做的事。

我想慢慢地想要这张图片，这取决于2月份特定日期的倒计时（我们公司庆祝她20年），向上改变位置。直到那一天：它应该完全在中间。

这里的图像只显示突出显示的部分的年份。

html会是这样的：

<div class="imageholder" style="overflow:hidden;width:100px; height:118px;">
    <img src="pathtoimage" id="MovingImage">
</div>

Answer 1

好的，我认为你需要这样的东西：

CSS ：

.imageholder{
    overflow: hidden;
    width: 100px; 
    height: 70px;
}

jQuery ：

var start = '1/19/2017 00:00:00',
    end   = '2/10/2017 00:00:00', // timer will stop at this time
    topOffset = 118;              // style=" margin-top: -118px " at the end time

var img = $('#MovingImage');

start = new Date(start).getTime();
end   = new Date(end).getTime();

var t = end - start;

timer();

function timer(){
    var now = new Date().getTime(),
        pst = now - start,
        top = pst*topOffset/t*-1;

    if( top > topOffset)
        top = topOffset;
    else
        setTimeout(timer,1000);

    img.css({
        'margin-top': top
    });
}

您可以height: ...px;，start = '...'，end = '...'和topOffset = ...

自定义此设置

<强> DEMO