我正在寻找一种方法(JavaScript或jQuery)让计时器脚本改变div中背景或常规图像的位置。 有很多现有的倒计时脚本,但他们不让我做我想做的事。
我想慢慢地想要这张图片,这取决于2月份特定日期的倒计时(我们公司庆祝她20年),向上改变位置。直到那一天:它应该完全在中间。
这里的图像只显示突出显示的部分的年份。
html会是这样的:
<div class="imageholder" style="overflow:hidden;width:100px; height:118px;">
<img src="pathtoimage" id="MovingImage">
</div>
答案 0 :(得分:0)
好的,我认为你需要这样的东西:
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 强>