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;
}
jquery 设置 transform/translate 获取 transform/translate 的值的更多相关文章
- jquery设置div,文本框 表单的值示例
我们将使用前一章中的三个相同的方法来设置内容: text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容(包括 HTML标记)val() - 设置或返回表单字段的值 1 ...
- Jquery chosen动态设置值实例介绍 select Ajax动态加载数据 设置chosen和获取他们选中的值
for (var i = 0; i < obj.length; i++) $("#selectnum" + nid).append("<option myid ...
- Jquery chosen动态设置值 select Ajax动态载入数据 设置chosen和获取他们选中的值
在做一个编辑对话框时,要对里面带有select option的操作.主要是想动态载入option和对option的选中.可是由于项目中使用了jquery里的chosen()方法.怎么也无法实现效果 ...
- Jquery设置select控件指定text的值为选中项
<select name="streetid" id="streetid"> <option value="4">北 ...
- jQuery EasyUI Combobox 无法获取属性 options 的值: 对象为 null 或未定义
错误的写法: $('#combobox1').combobox({ valueField: 'id', textField: 'text',data:[{id:1,text:'蚂蚁小羊'}]}); 正 ...
- css3的transform变换scale和translate等影响jQuery的position().top和offset().top
css3的transform变换scale和translate等影响jQuery的position().top和offset().top
- css3中的transform、transition、translate、animation(@keyframes)的区别
一.前言 在CSS中,我们经常会使用到transform.transition.translate.animation(@keyframes)这些长得相似,又不好区分的属性(值).每当需要使用它们,都 ...
- 封装transform函数(设置和获取transform的属性和属性值)
(function (w) { /** * 设置或者获取元素的transform属性值 * @param node 要设置的元素 * @param param 变换属性: translate\scal ...
- CSS动画详解及transform、transition、translate的区别
刚看完一节慕课网的css动画,在此总结下 1. 先说下 transform.transition.translate的区别 transform 和 transition是css的2个属性,transl ...
随机推荐
- IT企业级应⽤开发模式演化
前端研发流程 传统To B类系统的研发模式 探索 & 思考设计模式库(DPL)设计语⾔设计语⾔详解基于MVVM模式的Web框架 & UI库优化后的开发模式实现价值实践 赋能 赋能授权( ...
- WPF 自定义 ImageButton
控件源码: public class ImageButton : Button { public ImageButton() { } public string No ...
- log4j日志框架的使用
java.util.logging.Logger——java 中提供的日志类 实际开发 90% 都是使用 log4j 记录日志,而 Log4j 底层就是 java.util.logging.Logge ...
- Odoo的模块和应用程序的区别和使用
一.模块(modules)和应用程序(application)的区别: 模块元件是Odoo应用程序的组成快.模块可以将新功能添加到Odoo,或改变现有功能.模块是一个包含名为__manifest__. ...
- 自定义修改Anaconda Jupyterlab Home目录
自定义修改Anaconda Jupyterlab Home目录 最近在使用Anaconda学习数据分析和机器学习,会使用到Jupyter,但是他默认目录是用户的目录,我并没有习惯将项目和资料放在C盘, ...
- 微信小程序(基本知识点)
创建页面的两种方式: 1.通过创建文件夹的方式创建(.wxml/.wxss/.json/.js/) 2.在app.json的"pages": []中添加路径"pa ...
- SpringBoot+MyBatis配置多数据源
SpringBoot 可以支持多数据源,这是一个非常值得学习的功能,但是从现在主流的微服务的架构模式中,每个应用都具有唯一且准确的功能,多数据源的需求很难用到,考虑到实际情况远远比理论复杂的多,这里还 ...
- 文件去除git版本控制
git的版本控制是由其文件中的 .git文件来进行控制,但是这个文件一般情况是隐藏的. 想去除git的版本控制,有两种方式. 1.可以直接将其中的.git文件找出并删除 2.还可以通过命令的方式来操作 ...
- C# 虚拟串口通信
将主端口COM8拆分成 COM1和COM2两个虚拟端口 COM8接收的消息会传递给COM1和COM2 SerialPort spSend;//spSend,spReceive用虚拟串口连接,它们之间可 ...
- windows server 2016 x64用MecaCli工具检查raid5磁盘状态
下载并安装lsi MegaRAID raid卡 管理工具 下载网址:http://www.avagotech.com/support/download-search 在搜索框里搜索"mega ...