//获取 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;
}

jquery 设置 transform/translate 获取 transform/translate 的值的更多相关文章

  1. jquery设置div,文本框 表单的值示例

    我们将使用前一章中的三个相同的方法来设置内容: text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容(包括 HTML标记)val() - 设置或返回表单字段的值 1 ...

  2. Jquery chosen动态设置值实例介绍 select Ajax动态加载数据 设置chosen和获取他们选中的值

    for (var i = 0; i < obj.length; i++) $("#selectnum" + nid).append("<option myid ...

  3. Jquery chosen动态设置值 select Ajax动态载入数据 设置chosen和获取他们选中的值

      在做一个编辑对话框时,要对里面带有select option的操作.主要是想动态载入option和对option的选中.可是由于项目中使用了jquery里的chosen()方法.怎么也无法实现效果 ...

  4. Jquery设置select控件指定text的值为选中项

    <select name="streetid" id="streetid"> <option value="4">北 ...

  5. jQuery EasyUI Combobox 无法获取属性 options 的值: 对象为 null 或未定义

    错误的写法: $('#combobox1').combobox({ valueField: 'id', textField: 'text',data:[{id:1,text:'蚂蚁小羊'}]}); 正 ...

  6. css3的transform变换scale和translate等影响jQuery的position().top和offset().top

    css3的transform变换scale和translate等影响jQuery的position().top和offset().top

  7. css3中的transform、transition、translate、animation(@keyframes)的区别

    一.前言 在CSS中,我们经常会使用到transform.transition.translate.animation(@keyframes)这些长得相似,又不好区分的属性(值).每当需要使用它们,都 ...

  8. 封装transform函数(设置和获取transform的属性和属性值)

    (function (w) { /** * 设置或者获取元素的transform属性值 * @param node 要设置的元素 * @param param 变换属性: translate\scal ...

  9. CSS动画详解及transform、transition、translate的区别

    刚看完一节慕课网的css动画,在此总结下 1. 先说下 transform.transition.translate的区别 transform 和 transition是css的2个属性,transl ...

随机推荐

  1. DSAPI 远程协助之获取当前鼠标指针坐标及样式

    在编写远程协助类软件时,除了获取屏幕画面外,还需要获取鼠标当前的坐标以及当前的指针样式,以便让远程屏幕知道当前的操作状态. 使用DSAPI内置的鼠标指针类,可轻松获取. 代码如下: Imports D ...

  2. 制作联动时,数据绑定combox控件会触发SelectedIndexChanged事件

    看过很多个网站的解决办法,基本雷同,还不能解决,真怀疑他们是互相直接炒的,没事通过验证. 在做省市区的三级联动时候出现这个问题,最后通过先设置值对象和显示对象,最后才绑定数据,这样一个逻辑操作,什么问 ...

  3. java工作流引擎Jflow父子流程demo

    关键字 驰骋工作流引擎 流程快速开发平台 workflow ccflow jflow  .net开源工作流 定义 一个流程A的一个节点,因工作的需要调起另外的流程B,A就叫父流程,B就叫子流程.如果流 ...

  4. 安卓9.0系统机器(亲测有效)激活Xposed框架的步骤

    对于喜欢玩手机的哥们来说,经常会用到xposed框架及其种类繁多功能无敌的模块,对于5.0以下的系统版本,只要手机能获得root权限,安装和激活xposed框架是非常简便的,但随着系统版本的持续更新, ...

  5. MIUI12系统怎么样开启Root超级权限的流程

    MIUI12系统能有啥方法开启root超级权限?各位都清楚,Android机器有root超级权限,如果手机开启root相关权限,可以实现更好的功能,举例子,各位公司的营销部门,使用某些营销软件都需要在 ...

  6. PM领导能力成熟度2级

    人生如戏,大幕拉开,他走上舞台,饰演PM一角. 从技术岗位迈向管理岗位的第一步,对大多数像他一样的新晋PM来说,并不轻松.技术知识与经验是他曾经的主要才能与成功基础,而从成熟度一级开始,身为管理者的他 ...

  7. 【Linux】【MySQL】CentOS7、MySQL8.0.13 骚操作速查笔记——专治各种忘词水土不服

    1.前言 [Linux][MySQL]CentOS7安装最新版MySQL8.0.13(最新版MySQL从安装到运行) 专治各种忘词,各种水土不服. - -,就是一个健忘贵的速查表:(当然不包括SQL的 ...

  8. maven项目更换本地仓库

    由于电脑重装系统更换原来maven项目的本地仓库 以前的仓库位置如图 需要更换的仓库位置 更换步骤如下: 更换后:

  9. SpringBoot中集成Swagger2

    1.依赖jar <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-s ...

  10. SQL 语法使用

    SQL 语句 语句 语法 AND / OR SELECT column_name(s)FROM table_nameWHERE conditionAND|OR condition ALTER TABL ...