javascript - 如何自定义使用 css sprite 资源的 jCountdown 计时器成为自动响应？

Question

jCountdown插件效果不错。 https://0.s3.envato.com/files/42592367/index.html

但是通过检查资源，插件似乎使用了 css sprite 动画来实现效果。想知道让它变得多么困难 responsive/albe to view without seeing horizo​​ntal overflow-x 滚动条 在小于 485 像素的小尺寸上。

我将使用“幻灯片”效果，所以在 img 下方是 slide_black 皮肤。 也许可以分享一些关于自定义脚本/css/或 photoshop 图像以创建差异尺寸以适应响应式的技巧。

使用宽度选项是一种选择，但我认为陷阱是结果会模糊，尤其是对于天/小时/分钟/秒标签图片文本

$("#timer").jCountdown({
             timeText:  tdate,                        
             timeZone: 8,
             style: "slide",
             color: "black",
             width: 225,
             textGroupSpace: 15,
             textSpace: 0,
             reflection: !1,
             reflectionOpacity: 10,
             reflectionBlur: 0,
             dayTextNumber: 2,
             displayDay: !0,
             displayHour: !0,
             displayMinute: !0,
             displaySecond: !0,
             displayLabel: !0,
             onFinish: function() {}
        }); 

Answer 1

您可以使用 transform:scale() 属性来执行此操作，添加一些 jQuery 以找到正确的比例值并应用它。例子:

var value = yourOwnRatioCalculDependingOnClosestResponsiveParent;
$('.jCountdownContainer').css({
    "-moz-transform"    : "scale("+value+")",
    "-webkit-transform" : "scale("+value+")",
    "-ms-transform"     : "scale("+value+")",
    "-o-transform"      : "scale("+value+")",
    "transform"         : "scale("+value+")",
});

正如您在检查此插件时看到的那样，向 .jCountdownContainer 添加 css scale 效果很好(例如使用 Chrome Dev Tool)。