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

1
2
3
4
5
6
7
8
9
10
11
12
13
//获取 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 @   徐锅  阅读(12556)  评论(0编辑  收藏  举报
编辑推荐:
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
阅读排行:
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性

点击右上角即可分享
微信分享提示