Pressure.js 是一个用于处理 web 上的 Force Touch ,3D Touch 和指针压力的 JavaScript 库。
Pressure.js 兼容大多数浏览器,通过简单的 API 来控制这些压力触控,它还支持多点触摸。你完全可以在 web 上实现 iphone 中的 3D Touch 效果 :)
安装
可以从 GitHub 下载 pressure.min.js 或 pressure.js 文件,也可以使用 npm 或 bower 进行安装。
npm
npm install pressure --save
bower
bower install pressure --save
配置
Pressure.set('#id-name', {
change: function(force){
this.innerHTML = force;
}
});
或者与 browserify 或 CommonJS 一起使用:
var Pressure = require('pressure');
Pressure.set('#id-name', {
change: function(force){
this.innerHTML = force;
}
});
用法
Pressure.set('#element', {
start: function(event){
// 开始时
},
end: function(){
// 结束时
},
startDeepPress: function(event){
// 压感触控/深压时, 也就是一旦压感大于0.5时
},
endDeepPress: function(){
// 当压感触控/深压结束时
},
change: function(force, event){
// 每次压感发生变化时都会被调用
// 在移动设备和桌面端,压感的值始终为0到1
},
unsupported: function(){
// 注意:只有在polyfill选项被禁用的情况下才会调用这个选项!
// 一旦触摸元素并且设备或浏览器不支持压感触控或3D触控时调用
}
});
jQuery 用法
$('#element').pressure({
start: function (event) {
// 开始时
},
end: function () {
// 结束时
},
startDeepPress: function (event) {
// 压感触控/深压时, 也就是一旦压感大于0.5时
},
endDeepPress: function () {
// 当压感触控/深压结束时
},
change: function (force, event) {
// 每次压感发生变化时都会被调用
// 在移动设备和桌面端,压感的值始终为0到1
},
unsupported: function () {
// 注意:只有在polyfill选项被禁用的情况下才会调用这个选项!
// 一旦触摸元素并且设备或浏览器不支持压感触控或3D触控时调用
}
});
2018-04-14