2013-01-19 51 views
10

के साथ आर्क आकार टेक्स्ट मैंने सीएसएस 3 गुणों के साथ पाठ में एक आर्क आकार देने की कोशिश की है और IE8 का समर्थन करने के लिए जेएस को भी बदल दिया है। लेकिन यह काम नहीं कर रहा है।सीएसएस 3 और आईआई 8 समर्थन

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(); 
}); 

बोल्ड के साथ चिह्नित पाठ को मेरे जेएस फ़ंक्शन में बदलाव किया जाता है। क्या कोई यहाँ मेरी मदद कर सकता है। मैंने jsfiddle

उत्तर

0

पर एक डेमो बनाया है आईई के लिए आपका ट्रांसफॉर्म कोड गलत है। यह इस तरह होना चाहिए:

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- उपसर्ग की आवश्यकता है।

+0

धन्यवाद @Licson, मैंने आपके कोड की कोशिश की है, लेकिन पाठ अन्य 8 ब्राउज़र में सही तरीके से नहीं आ रहा है क्योंकि यह अन्य ब्राउज़रों में है। – matthewb

+0

मुझे लगता है कि आपको jquery ट्रांसफॉर्म प्लगइन का उपयोग करने का प्रयास करना चाहिए। यह क्रॉस-ब्राउज़र है और आपको समय और कोड बचाने में मदद कर सकता है। – Licson

1

जैसा कि 2013 में सवाल पूछा गया था और आईई 8 तेजी से बाहर निकल रहा है, मैंने सोचा कि मैं एक अद्भुत आर्क टेक्स्ट सीएसएस जनरेटर के लिए लिंक दूंगा: http://csswarp.eleqtriq.com/