JQuery.rotate.js是一個非常流行的jQuery插件,用于實現圖像旋轉的效果。該插件可以實現在各種瀏覽器上的穩定運行,但是卻會在IE8瀏覽器上出現一些問題。
問題出在IE8瀏覽器對CSS3 transform屬性的支持上,因為CSS3 transform屬性是在IE9以上才被支持的,所以IE8瀏覽器無法直接使用該屬性。因此,在使用JQuery.rotate.js插件時,必須要對IE8瀏覽器單獨進行處理。
下面是對IE8瀏覽器進行處理的代碼:
jQuery.fn.rotate = function(degrees) { var ie = navigator.userAgent.match(/MSIE\s([\d]+)/), ie9 = ie && parseInt(ie[1], 10) === 9; if (ie && !ie9) { var rad = degrees * (Math.PI / 180), costheta = Math.cos(rad), sintheta = Math.sin(rad); return this.each(function() { var $this = $(this), matrix = $this.css('filter'), filterType = (/[^0-9.]/gi).test(matrix) ? ' ' : '', radians = '-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod=\'auto expand\', M11=' + costheta + filterType + 'M12=-' + sintheta + filterType + 'M21=' + sintheta + filterType + 'M22=' + costheta + ', FilterType=\'nearest neighbor\');"'; $this.css({ '-ms-filter': 'progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod=\'auto expand\')', '-ms-transform': 'rotate(' + degrees + 'deg)', filter: matrix.replace(/progid:DXImageTransform.Microsoft.Matrix\([^)]*\)/gi, '') + radians }); }); } else { return this.each(function() { var $this = $(this); $this.css({ '-webkit-transform': 'rotate(' + degrees + 'deg)', '-moz-transform': 'rotate(' + degrees + 'deg)', '-o-transform': 'rotate(' + degrees + 'deg)', 'transform': 'rotate(' + degrees + 'deg)' }); }); } };
通過上述處理代碼,我們可以在IE8瀏覽器上實現圖像旋轉功能,使JQuery.rotate.js插件能夠在各種瀏覽器上正常運行,給用戶帶來更好的用戶體驗。
下一篇vue的mvvm概念