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 回答
1

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

$('.user-text').css('transform', 'scale(' + ui.value + ')');
于 2014-09-18T16:04:51.387 回答
0 
$(".oSlider-rotate").slider({
     min: 10,
     max: 74,
     step: .01,
     value: 24,
     slide: function(e,ui){
                 $('.user-text').css('transform', 'scale(' + ui.value + ')')

            }                
  });

这将解决问题

于 2019-10-09T12:45:57.207 回答