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 ...
随机推荐
- 【网摘】C#.NET 在 MVC 中动态绑定下拉菜单的方法
1. 已知下拉菜单列表项: 在 Controller 控制器类中输入已下代码 1 public class DemoController : Controller 2 { 3 public ...
- c# jobject 的数据结构的解析:
c# jobject 数据结构的解析:首先下载Newtonsoft.Json,增加引用using Newtonsoft.Json.Linq;把jobject的内容提取出来,Jobject的内容格式如下 ...
- 基础概念PHP-FPM、FastCGI和CGI
在搭建 LAMP/LNMP 服务器时,会经常遇到 PHP-FPM.FastCGI和CGI 这几个概念.如果对它们一知半解,很难搭建出高性能的服务器.接下来我们就以图形方式,解释这些概念之间的关系. 基 ...
- Android为TV端助力:adb查找包名位置
logcat | grep START 查找启动launcher adb shell "pm list packages -f | grep +包名" 查找包的路径
- webstorm2018.1 汉化
https://github.com/pingfangx/TranslatorX 这个百度云 选择webstorm 选择勾选的文件 选择你下载webstorm 的版本 我下载的是2018.1的 之后等 ...
- C语言货架02
第1章 程序设计和C语言 最简单的C语言程序举例 #include<stdio.h> int main() { printf("这是一个C程序\n"); : } C语 ...
- Linux学习历程——Centos 7 passwd命令
一.命令介绍 passwd 命令用于修改用户密码,过期时间,认证信息等. 普通用户只能使用 passwd 命令修改自身的系统密码,而 root 管理员则有权限修改其他所有人的密码.更酷的是,root ...
- C# -- 等待异步操作执行完成的方式
C# -- 等待异步操作执行完成的方式 1. 等待异步操作的完成,代码实现: class Program { static void Main(string[] args) { Func<int ...
- 浏览器仿EXCEL表格插件 版本更新 - 智表ZCELL产品V1.3.1更新
智表(zcell)是一款浏览器仿excel表格jquery插件.智表可以为你提供excel般的智能体验,支持双击编辑.设置公式.设置显示小数精度.下拉框.自定义单元格.复制粘贴.不连续选定.合并单元格 ...
- scrapy CrawlSpider解析
CrawlSpider继承自Spider, CrawlSpider主要用于有规则的url进行爬取. 先来说说它们的设计区别: SpiderSpider 类的设计原则是只爬取 start_urls 中的 ...