Использование css transform свойство в jQuery
Как вы можете указать элементы управления кросс-браузерным преобразованием, используя jQuery, поскольку каждый браузер использует свою собственную методологию?
Вот код, который я использую для Firefox, но я даже не могу заставить его работать. Я думаю, это потому, что нет способа определить, какое преобразование & # x2013; масштабировать, поворачивать, наклонять & # x2013; использовать.
$(".oSlider-rotate").slider({
min: 10,
max: 74,
step: .01,
value: 24,
slide: function(e,ui){
$('.user-text').css('transform', ui.value)
}
});
Ответы на вопрос(4)
jquery.transit - это очень простая и мощная библиотека, которая позволяет вам выполнять преобразование, одновременно работая с кросс-браузерной совместимостью.
Это может быть так просто, как это:$("#element").transition({x:'90px'}).
Возьми это по этой ссылке:http://ricostacruz.com/jquery.transit/
-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 здесь, но вы можете заменить его любым другим преобразованием, которое вы хотели.
то все, что вам нужно сделать, это включить эту функцию в значение. Например:
$('.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/
-moz ни-webkit префиксы вендоров применяются к IE. Мой код служит примеромhow применить свойства. Если вам это не нравится, не стесняйтесь написать свой собственный ответ :)http://leaverou.github.io/prefixfree поэтому мне не нужно заботиться о префиксах поставщиков. Он аккуратно позаботится о том, чтобы установить правильный префикс продавца за кулисами для вас. Кроме того, также доступен плагин jQuery, так что можно по-прежнему использовать метод jQuery .css () без изменений кода, так что предложенная строка в сочетании с префиксом будет всем, что вам нужно:
$('.user-text').css('transform', 'scale(' + ui.value + ')');