59

各ブラウザーは独自の方法を使用しているように見えるため、jQueryを使用してクロスブラウザー変換コントロールを指定するにはどうすればよいですか？

これが私がFirefoxに使用しているコードですが、それを動作させることさえできません。スケール、回転、スキューのどの変換を使用するかを判断する方法がないためだと思います。

$(".oSlider-rotate").slider({
     min: 10,
     max: 74,
     step: .01,
     value: 24,
     slide: function(e,ui){
                 $('.user-text').css('transform', ui.value)

            }                
  });
4

5 に答える 5

116

特定の変換関数を使用する場合は、その関数を値に含めるだけです。例えば：

$('.user-text').css('transform', 'scale(' + ui.value + ')');

次に、ブラウザのサポートは改善されていますが、おそらく次のようなベンダー プレフィックスを使用する必要があります。

$('.user-text').css({
  '-webkit-transform' : 'scale(' + ui.value + ')',
  '-moz-transform'    : 'scale(' + ui.value + ')',
  '-ms-transform'     : 'scale(' + ui.value + ')',
  '-o-transform'      : 'scale(' + ui.value + ')',
  'transform'         : 'scale(' + ui.value + ')'
});

jsFiddle の例: http://jsfiddle.net/jehka/230/

于 2012-05-29T23:35:41.293 に答える
8

-vendor古いブラウザーでサポートされていないプレフィックスを設定すると、 .css. 代わりに、サポートされているプレフィックスを最初に検出します。

// Start with a fall back
var newCss = { 'zoom' : ui.value };

// Replace with transform, if supported
if('WebkitTransform' in document.body.style) 
{
    newCss = { '-webkit-transform': 'scale(' + ui.value + ')'};
}
// repeat for supported browsers
else if('transform' in document.body.style) 
{
    newCss = { 'transform': 'scale(' + ui.value + ')'};
}

// Set the CSS
$('.user-text').css(newCss)

それは古いブラウザで動作します。ここで行いましscaleたが、必要な他の変換に置き換えることができます。

于 2013-08-07T11:17:02.540 に答える
2

jquery を使用している場合、jquery.transit は非常にシンプルで強力なライブラリであり、クロスブラウザーの互換性を処理しながら変換を行うことができます。次のように簡単にできます$("#element").transition({x:'90px'})。

このリンクから取得してください: http://ricostacruz.com/jquery.transit/

于 2014-07-19T03:45:58.810 に答える