//获取 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. java 线程池 ---- newSingleThreadExecutor()

    class MyThread implements Runnable{ private int index; public MyThread(int index){ this.index = inde ...

  2. 利用AccessibilityService自动获取微信号(Android)

    前言: 最近遇到一个需求,要求写一个小插件,能够自动在微信的页面弹出一个窗口,展示用户的相关信息(与我们公司有关的信息,方便运营快速了解用户信息). 当时我第一反应是不可能,如果能够在别的app中获取 ...

  3. Android为TV端助力 使用shared注意事项

    不要存放大的key和value!我就不重复三遍了,会引起界面卡.频繁GC.占用内存等等,好自为之! 毫不相关的配置项就不要丢在一起了!文件越大读取越慢,不知不觉就被猪队友给坑了:蓝后,放进defalu ...

  4. 查看apk签名 和 keystore 的信息

    原文出处:https://www.jianshu.com/p/90b698002215 1.keytool -printcert -file ***(把apk文件下的META- INF文件夹解压出来, ...

  5. 解决Angular2 (SystemJS) XHR error (404 Not Found) loading traceur

    初学Angular2,跟着Angular2中文网学到HTTP这一节时出现了一个异常: GET http://localhost:3000/traceur 404 (Not Found) Error: ...

  6. c# 多线程 --Mutex(互斥锁) 【转】

    互斥锁(Mutex) 互斥锁是一个互斥的同步对象,意味着同一时间有且仅有一个线程可以获取它. 互斥锁可适用于一个共享资源每次只能被一个线程访问的情况 函数: //创建一个处于未获取状态的互斥锁 Pub ...

  7. docker部署postgresql时,data目录不生效的问题探究

    今天用docker部署postgresql,用的是官方的镜像.结果挂载完 /var/lib/postgresql/data目录后,和容器里的目录其实并没有挂载成功. 母机上的目录并没有成功挂载到容器里 ...

  8. 【原】Java学习笔记033 - IO

    package cn.temptation; public class Sample01 { public static void main(String[] args) { // 需求:继承关系中爷 ...

  9. python3 员工信息表

    这是最后一条NLP了......来吧 十二,动机和情绪总不会错,只是行为没有效果而已 动机在潜意识里,总是正面的.潜意识从来不会伤害自己,只会误会的以为某行为可以满足该动机,而又不知道有其他做法的可能 ...

  10. 关于nginx unit服务非正常关闭后,无法重新启动问题的处理

    昨天在前领导技术大牛吕哥的帮忙下,python服务管理从nginx+supervisor+uwsgi+python3改为了轻便结构nginx + unit + python3,部署和配置起来顿时轻松起 ...