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#工具:加密解密帮助类
using System; using System.IO; using System.Security.Cryptography; using System.Text; //加密字符串,注意strE ...
- OO第二次博客作业——电梯调度
OO第二次博客作业——电梯调度 前言 最近三周,OO课程进入多线程学习阶段,主要通过三次电梯调度作业来学习.从单部电梯的傻瓜式调度到有性能要求的调度到多部电梯的调度,难度逐渐提升,对同学们的要求逐渐变 ...
- MySQL中SELECT语句简单使用
最近开始复习mysql,查漏补缺吧. 关于mysql 1.MySQL不区分大小写,但是在MySQL 4.1及之前的版本中,数据库名.表名.列名这些标识符默认是区分大小写的:在之后的版本中默认不区分大小 ...
- vue 项目中引用百度地图
新建map.js export const BaiduMap = { init: function() { const BMapURL = 'https://api.map.baidu.com/api ...
- 基于python的种子搜索网站-开发过程
本讲会对种子搜索网站的开发过程进行详细的讲解. 源码地址:https://github.com/geeeeeeeek/bt 项目开发过程 项目简介 该项目是基于python的web类库django开发 ...
- java.sql.SQLException: The server time zone value '???ú±ê×??±??' is unrecognized or represents more than one time zone.
[报错信息] [百度翻译] 服务器时区值'???ú±ê×??±??'无法识别或表示多个时区.如果要利用时区支持,必须配置服务器或JDBC驱动程序(通过ServerTimeZone配置属性),以使用更具 ...
- DVWA 黑客攻防演练(十)反射型 XSS 攻击 Reflected Cross Site Scripting
XSS (Cross-site scripting) 攻击,为和 CSS 有所区分,所以叫 XSS.又是一种防不胜防的攻击,应该算是一种 "HTML注入攻击",原本开发者想的是显示 ...
- MySQL数据库在IO性能优化方面的设置选择(硬件)
提起MySQL数据库在硬件方面的优化无非是CPU.内存和IO.下面我们着重梳理一下关于磁盘I/O方面的优化. 1.磁盘冗余阵列RAID RAID(Redundant Array of Inexpens ...
- June. 27th 2018, Week 26th. Wednesday
To be great, truly great, you have to be the kind of person who makes the others around you great. 要 ...
- SQL FIRST() 函数
FIRST() 函数 FIRST() 函数返回指定的字段中第一个记录的值. 提示:可使用 ORDER BY 语句对记录进行排序. SQL FIRST() 语法 SELECT FIRST(column_ ...