Question

如何使用jQuery指定跨浏览器转换控件，因为每个浏览器似乎都使用自己的方法？

这是我用于Firefox的代码，但我甚至无法让它工作。我认为这是因为无法确定使用哪种转换 - 缩放，旋转，倾斜。

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

            }                
  });

Answer 1

如果要使用特定的转换函数，那么您需要做的就是在值中包含该函数。例如：

$('.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 with example：http://jsfiddle.net/jehka/230/

Answer 2

设置旧浏览器不支持的-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但你可以用你想要的任何其他变换替换它。

Answer 3

如果你正在使用jquery，jquery.transit是一个非常简单和强大的lib，它允许你在处理跨浏览器兼容性的同时进行转换。它可以这么简单：$("#element").transition({x:'90px'})。

从此链接中获取：http://ricostacruz.com/jquery.transit/

Answer 4

我开始使用http://leaverou.github.io/prefixfree提供的'无前缀'脚本，因此我不必关心供应商前缀。它巧妙地为您在幕后设置正确的供应商前缀。另外还有一个jQuery插件，所以仍然可以使用jQuery的.css（）方法而无需更改代码，因此建议的行与前缀无关将是您所需要的：

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

Answer 5

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

            }                
  });

这将解决问题

在jQuery中使用css transform属性

5 个答案: