使用 jQuery 获取 translate3d 的第一个值

【问题标题】：Get first value of translate3d with jQuery使用 jQuery 获取 translate3d 的第一个值
【发布时间】：2015-05-19 08:51:33
【问题描述】：

我正在尝试从样式属性中获取translat3d 的第一个值。在真正的应用程序中，.css('transform') 不起作用，这就是我使用attr.('style'...) 的原因

谁能解释一下如何获得 translate3d 的第一个值？

http://jsfiddle.net/6gLqw4df/2/

【问题讨论】：

为什么不使用类似var slideTransform = $('#mySlide').css('transform'); 的东西来返回3D 效果的矩阵？
因为它是在我单击链接后打开的滑块，并且 css('transform') 返回错误结果
你能提供一个演示吗？我只是觉得这里实际上不需要转换的“3D”部分（您只是想水平移动 div 吗？）

标签： javascript jquery css dom

【解决方案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 结果来删除。（比如检查它的长度等）

【讨论】：