使用 jQuery 检测跨浏览器的 CSS 转换变化

Question

我需要使用 jQuery 检测 CSS 变换属性是否已更改。在 firebug 中，我希望检测更改的 CSS 属性呈现如下：

-moz-transform:translate(-0px, 0px)

我需要检测这是否已更改为另一个像素属性。例如：

-moz-transform:translate(-100px, 0px)

更多详细信息：

最终，我尝试在以下演示中检测单击和拖动之间的情况。

http://cubiq.org/dropbox/iscroll4/examples/carousel/

我想我可以在当前的变换属性上查询mouseup，如果它保持不变，则为单击，或者如果变换属性发生更改，则为拖动。

Answer 1

您可以使用 Modernizr 创建供应商前缀，然后可以使用 .split() 分解 .css() 的输出并获取所需的值。

以下是获取正确前缀属性的方法：

if (Modernizr.csstransforms3d) {
    trans_key = Modernizr.prefixed('transform').replace(/([A-Z])/g, function(str,m1){ return '-' + m1.toLowerCase(); }).replace(/^ms-/,'-ms-');

} else if (Modernizr.csstransforms) {
    trans_key = Modernizr.prefixed('transform').replace(/([A-Z])/g, function(str,m1){ return '-' + m1.toLowerCase(); }).replace(/^ms-/,'-ms-');
}

来源：http://www.modernizr。 com/docs/#prefixed

然后你可以使用 .css() 来获取 -vender-transform 属性：

var matrix = $('#element-id').css(trans_key);//output = matrix(1, 0, 0, 1, 100px, 0px)

最后你可以 <代码>.split() matrix 值转换为可用的东西：

var data = matrix.replace(')', '').split(',');//data[4]='100px', data[5]='0px'

这是一个演示：http://jsfiddle.net/7Yz8B/