支持css3和ie8的弧形文本

我试图给出带有css3属性的文本的弧形，并且还改变了js来支持ie8。但是这不起作用。支持css3和ie8的弧形文本

this.$letters.each(function (i) { 
    var $letter = $(this), 
     transformation = (_self.options.radius === -1) ? 'none' : 'translateX(' + $letter.data('x') + 'px) translateY(' + $letter.data('y') + 'px) rotate(' + $letter.data('a') + 'deg)', 
     transition = (animation) ? 'all ' + (animation.speed || 0) + 'ms ' + (animation.easing || 'linear') : 'none'; 


    filterIE = 'M11=' + $letter.data('x') + ', M21=' + $letter.data('y') + ',rotation=' + $letter.data("a") + 'deg'; // js function for supporting ie8 
    //alert(filterIE); 
    $letter.css({ 
     '-webkit-transition': transition, 
     '-moz-transition': transition, 
     '-o-transition': transition, 
     '-ms-transition': transition, 
     'transition': transition 
    }) 
    .css({ 
     '-webkit-transform': transformation, 
     '-moz-transform': transformation, 
     '-o-transform': transformation, 
     '-ms-transform': transformation, 
     'transform': transformation, 
     'filter': "progid:DXImageTransform.Microsoft.Matrix(" + filterIE + ")" // js function for supporting ie8 
    }); 

    function getIEVersion() { 
     var rv = -1; // Return value assumes failure. 
     if (navigator.appName == 'Microsoft Internet Explorer') { 

      var ua = navigator.userAgent; 
      var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})"); 
      if (re.test(ua) != null) 

       rv = parseFloat(RegExp.$1); 
     } 
     return rv; 
    } 


    function checkVersion() { 
     var ver = getIEVersion(); 

     if (ver != -1) { 
      if (ver <= 9.0) { 
       //.css("-ms-filter","progid:DXImageTransform.Microsoft.Matrix(M11=1.4488887394336025, M12=-0.388228567653781, M21=0.388228567653781, M22=1.4488887394336025, SizingMethod='auto expand')" 
       //);// do something 
      } 
     } 
    } 

    checkVersion(); 
});

用粗体标出的文字是对我的js函数做了改动。有人可以帮我从这里出去吗。我在jsfiddle

来源

2013-01-19 matthewb

上进行了演示您的IE转换代码是错误的。它应该是这样的：

var cos = Math.cos; 
var sin =Math.sin; 
var deg2rad = 180 * Math.PI; 
var filterIE = 'M11=' + ($letter.data('x')+cos($letter.data("a")/deg2rad)) + ',M12=' + sin($letter.data("a")/deg2rad) + ', M21=' + ($letter.data('y')-sin($letter.data("a")/deg2rad)) + ',M22=' + cos($letter.data("a")/deg2rad) + ',sizingMethod=\'auto expand\''

此外，IE9 +支持CSS3转换。你只需要-ms-前缀。

来源

2013-01-21 07:32:38 Licson

感谢@Licson，我已经试过了你的代码，但是在ie8中的文本并没有以正确的方式出现，因为它在其他浏览器中。 – matthewb

我想你应该尝试使用jQuery转换插件。它是跨浏览器，可以帮助您节省时间和代码。 – Licson

由于问题在2013年被问及IE8正在迅速出现，我想我会链接到一个惊人的弧文本CSS生成器：http://csswarp.eleqtriq.com/。

来源

2014-09-09 13:26:11

支持css3和ie8的弧形文本

回答

相关问题