• 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;
            }
  • 相关阅读:
    用代码关闭 overlay弹出层
    Asp.net CheckBoxList 多选提示
    C#获取拼音简码
    Discuz!NT的上传头像功能(Silverlight)
    在项目中使用 Discuz!NT的上传头像功能
    用户控件和href,src及其css路径问题
    截取html字符长度,并保留html格式标记
    SSSE3指令集水平加法指令饱和字节乘加指令以及字节重排指令
    SSE2指令集系列之二整数运算相关指令
    SSE指令集系列之二浮点与整数转换指令
  • 原文地址:https://www.cnblogs.com/q1104460935/p/9678401.html
Copyright © 2020-2023  润新知