根據倒計時時間更改圖像位置的腳本

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

自定義此