如何自定义使用 css 精灵资源的 jCountdown 计时器变为自动响应？

Question

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

然而通过检查资源，插件似乎使用了 css sprite 动画来实现效果。想知道让它变得多么困难 responsive/albe查看时看不到水平溢出-x滚动条在小于 485 像素的小尺寸上。

我将使用 "slide" 效果，所以下面的 img 是 slide_black 皮肤。也许可以分享一些关于自定义脚本的技巧/css/或对图像进行 Photoshop 以创建差异尺寸以适应响应。

使用宽度选项是一种选择，但我认为陷阱是结果会模糊，尤其是对于 day/hour/min/sec 标签图片文本

$("#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+")",
});

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

如何自定义使用 css 精灵资源的 jCountdown 计时器变为自动响应？

How to Customize jCountdown timer which is using css sprite resources to become auto Responsive?

javascript

html

css

countdowntimer