Question

我试图从样式属性中获取translat3d的第一个值。在真实的应用中，.css('transform')无法正常工作，这就是为什么我使用attr.('style'...)

有人可以解释如何获得translate3d的第一个值吗？

Answer 1

有点棘手，但有效。更明显的是，我每次点击增加100px。

$('button').on('click', function() {
    var slideTransform = $('#mySlide').attr('style').split(';');
    slideTransform = $.map(slideTransform, function(style){
        style = style.trim();
        if (style.startsWith('transform:translate3d')) {
            var match = style.match(/transform:translate3d\((.+)px,(.+)px,(.+)px\)/);
            var value = parseInt(match[1]);
            var newValue = value + 100;
            console.log(newValue);
            return 'transform:translate3d(' + newValue + 'px, 0px, 0px)';
        }
        return style;
    });
    // add 100px to first value of translate3d
    $('#mySlide').attr('style', slideTransform.join(';'));
});

https://jsfiddle.net/Lr5rhyug/

抱歉我的丑陋代码。可以通过检查startsWith结果来删除match。（比如检查它的长度等）

使用jQuery获取translate3d的第一个值

1 个答案: