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; }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性