码迷,mamicode.com
首页 > 其他好文 > 详细

transform总结

时间:2017-09-14 16:40:41      阅读:159      评论:0      收藏:0      [点我收藏+]

标签:mat   orm   class   break   replace   style   读写   for   版本   

1. 用jquery的css方法获取transform得到的是矩阵matrix,不利于获取translate的值,
优先使用dom.style.webKitTransform进行transform的读写

2. 从transform中读取translate的值方法

//jquery版本
function fGetTranslate($obj,type){
    var transformMatrix = obj.css("-webkit-transform") ||
                            obj.css("-moz-transform")    ||
                            obj.css("-ms-transform")     ||
                            obj.css("-o-transform")      ||
                            obj.css("transform");
    var matrix = transformMatrix.replace(/[^0-9\-.,]/g, ‘‘).split(‘,‘);
    var x = matrix[12] || matrix[4]; //translate x
    var y = matrix[13] || matrix[5]; //translate y
    if(type == ‘x‘){
        return x;
    }
    else if(type == ‘y‘){
        return y;
    }   
    return ‘‘;
}
//dom版本
function fGetTranslate(obj,type){
    var transform = obj.style.webkitTransform || obj.style.transform;
    var aTrans = transform.replace(/[^0-9\-.,]/g, ‘‘).split(‘,‘),
        res = ‘‘;
    switch(type){
        case ‘x‘:
            res = parseInt(aTrans[0]);
            break;
        case ‘y‘:
            res = parseInt(aTrans[1]);
            break;
        case ‘z‘:
            res = parseInt(aTrans[2]);
            break;
        default:
            break;
    } 
    return res || ‘‘;
}

 

transform总结

标签:mat   orm   class   break   replace   style   读写   for   版本   

原文地址:http://www.cnblogs.com/mengff/p/7520609.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!