jquery 设置 transform/translate 获取 transform/translate 的值

//获取 transform 值 

var reg=/matrix.(((-)?([0-9]+.)?\d+([, ]+)?){6})./g;

var str= progressUI.css("transform");
//str  =  matrix(1, 0, 0, 1, 0, 0)

var arr=reg.exec(str);

 var newarr = arr[1].split(/[, ]+/g);
//newarr = ["1", "0", "0", "1", "0", "0"]

console.log(newarr);

例设置 translate 值 ;
$(obj).css("transform","translate(30px,0px)");

案例:
 //mobile + pc 拖动
        /**
         *
         * @type {string}
         */
        var progressUIClass = '.progress';
        // console.info(({"is_pc" : IsPC()}));
        if(IsPC()){
            /**
             *
             */
            $(progressUIClass).eq(0).find('ul').bind('mousedown',function(e){
                positionX = e.pageX;
                $(this).bind('mousemove',function(e){
                    e.preventDefault();
                    var value = e.pageX-positionX;
                    positionX = e.pageX ;
                    var reg=/matrix.(((-)?([0-9]+.)?\d+([, ]+)?){6})./g;
                    var str= $(progressUIClass).eq(0).find('ul').css("transform");
                    var arr=reg.exec(str);
                    var newarr = arr[1].split(/[, ]+/g);
                    var revalue = (Number(value) + Number(newarr[4]));
                    var newValue = revalue + 'px';
                    var ulWidth =  $(progressUIClass).eq(0).find('ul').width();
                    var wwidth  = $('body').width();
                    if(!(revalue > 0) && (revalue > (wwidth - ulWidth))){
                        $(progressUIClass).eq(0).find('ul').css("transform","translate("+newValue+",0px)");
                    }
                });
            });
            //mouse up 鼠标松开事件;
            /**
             *
             */
            $(progressUIClass).eq(0).find('ul').bind('mouseup mouseleave',function(e){
                $(this).unbind('mousemove');
            });
        }else{
            var positionX =0;
            //客户端拖动事件
            /**
             *
             */
            $(progressUIClass).eq(0).find('ul')[0].addEventListener('touchstart',function(event){
                event.preventDefault();
                // console.log('touchstart');return;
                if(event.targetTouches.length == 1){
                    var touch = event.targetTouches[0];
                    positionX = touch.pageX;
                }
            }, false);
            /**
             *
             */
            $(progressUIClass).eq(0).find('ul')[0].addEventListener('touchmove', function(event) {
                event.preventDefault();
                // console.log('touchmove');return;
                if(event.targetTouches.length == 1){
                    var touch = event.targetTouches[0];
                    var value = touch.pageX-positionX;
                    positionX = touch.pageX ;
                    var reg=/matrix.(((-)?([0-9]+.)?\d+([, ]+)?){6})./g;
                    var str= $(progressUIClass).eq(0).find('ul').css("transform");
                    var arr=reg.exec(str);
                    var newarr = arr[1].split(/[, ]+/g);
                    var revalue = (Number(value) + Number(newarr[4]));
                    var newValue = revalue + 'px';

                    // console.info(newValue);
                    var ulWidth =  $(progressUIClass).eq(0).find('ul').width();
                    var wwidth  = $('body').width();
                    if(!(revalue > 0) && (revalue > (wwidth - ulWidth))) {
                        $(progressUIClass).eq(0).find('ul').css("transform", "translate(" + newValue + ",0px)");
                    }
                }
            }, false);
            /**
             *
             */
            $(progressUIClass).eq(0).find('ul')[0].addEventListener('touchend', function(event) {
                // console.log('touchend');return;
            }, false);
        }


        /**
         *
         * @returns {boolean}
         * @constructor
         */
        function IsPC() {
            var userAgentInfo = navigator.userAgent;
            var Agents = ["Android", "iPhone",
                "SymbianOS", "Windows Phone",
                "iPad", "iPod"];
            var flag = true;
            for (var v = 0; v < Agents.length; v++) {
                if (userAgentInfo.indexOf(Agents[v]) > 0) {
                    flag = false;
                    break;
                }
            }
            return flag;
        }

 

posted @ 2018-09-19 23:45  徐锅  阅读(12553)  评论(0编辑  收藏  举报