2014年2月26日 星期三

新增 jQuery CSSHooks 的方法

由於在做使用滑鼠旋轉物件的 UI
因此需要使用新的 CSS 類別
剛好找到將新的CSS類別新增到 jQuery().css 的方法
(function($){
  function getTransformProperty(element) {
    var properties = ['transform', 'WebkitTransform', 'MozTransform', 'msTransform', 'OTransform'];
    var p;
    while(p = properties.shift()){
      if(element.style[p] !== undefined)return p;
    }
    return false;
  }
  $.cssHooks['rotate'] = {
    get: function(elem, computed, extra){
      var property = getTransformProperty(elem);
      if(property){
        return elem.style[property].replace(/.*rotate\((.*)deg\).*/, '$1');
      }else{
        return '';
      }
    },
    set: function(elem, value){
      var property = getTransformProperty(elem);
      if(property){
        value = parseInt(value);
        $(elem).data('rotatation', value);
        if(value == 0){
          elem.style[property] = '';
        }else{
          elem.style[property] = 'rotate(' + value%360 + 'deg)';
        }
      }else{
        return '';
      }
    }
  };
  $.fx.step['rotate'] = function(fx){
    $.cssHooks['rotate'].set(fx.elem, fx.now);
  };
})(jQuery);

沒有留言:

張貼留言