使用jQuery檢測跨瀏覽器的CSS轉換更改

我需要檢測CSS轉換屬性是否使用jQuery更改過。在Firebug的CSS屬性我期待上呈現這樣的檢測變化：使用jQuery檢測跨瀏覽器的CSS轉換更改

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

我需要檢測是否這種情況已經改變到另一個像素財產。例如：

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

更多細節：

最後我想一個點擊以下演示一拖之間來檢測。

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

我想，我可以查詢在當前變換屬性mouseup，如果它仍然是相同的，這是一個點擊，或者變換屬性更改這將是一個拖累。

來源

2011-12-21 Chamilyan

誰會改變？ – FakeRainBrigand 2011-12-21 00:15:49

用戶可以通過拖動容器溢出來改變它。 – Chamilyan 2011-12-21 00:20:58

聽起來像你可能有更大的問題。除非這完全是你需要做的，否則解釋你在做什麼以及爲什麼你需要這樣做會對你有好處 - 你的解決方案可能不是唯一的解決方案，或者可能是太多的工作，或者不是正確的那一個。編輯：你不能只在用戶拖動容器後使用回調？ – 2011-12-21 00:21:56

您可以使用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/

來源

2011-12-21 00:22:56 Jasper

使用jQuery檢測跨瀏覽器的CSS轉換更改

回答

相關問題