zoukankan      html  css  js  c++  java
  • 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;
            }
  • 相关阅读:
    vue_ajax-axios的使用
    laravel验证码扩展包gregwar/captcha的使用
    如何让你的网页变为黑白色
    laravle Str::random(num)函数
    laravel_日志查看-logViewer工具的使用
    如何自定义css的鼠标样式
    公鸡3块钱1只,母鸡5块钱1只,小鸡1块钱3只,用100块买100只鸡,一共多少种买法,分别是什么?
    假设某人有100000现金。 每经过一次路口需要进行一次交费。 交通规则为为当他现金大于50000时每次需要交5%如果现金小于等于50000时每次交5000。 请写一程序计算此人可以经过多少次这个路口
    本周总结
    本周总结
  • 原文地址:https://www.cnblogs.com/q1104460935/p/9678401.html
Copyright © 2011-2022 走看看