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; }