AlloyFinger
npm install alloyfinger
demo：
var pinchImg = document.getElementById("pinchImg");
Transform(pinchImg);
var initScale = 1;
new AlloyFinger(pinchImg, {
multipointStart: function () {
initScale = pinchImg.scaleX;
},
pinch: function (evt) {
pinchImg.scaleX = pinchImg.scaleY = initScale * evt.zoom;
}
});
var rotateImg = document.getElementById("rotateImg");
Transform(rotateImg);
new AlloyFinger(rotateImg, {
rotate:function(evt){
rotateImg.rotateZ += evt.angle;
}
});
var pinchRotateImg = document.getElementById("pinchRotateImg");
Transform(pinchRotateImg);
new AlloyFinger(pinchRotateImg, {
rotate:function(evt){
pinchRotateImg.rotateZ += evt.angle;
},
multipointStart: function () {
initScale = pinchRotateImg.scaleX;
},
pinch: function (evt) {
pinchRotateImg.scaleX = pinchRotateImg.scaleY = initScale * evt.zoom;
}
});
var pressMoveImg = document.getElementById("pressMoveImg");
Transform(pressMoveImg);
new AlloyFinger(pressMoveImg, {
pressMove:function(evt){
pressMoveImg.translateX += evt.deltaX;
pressMoveImg.translateY += evt.deltaY;
evt.preventDefault();
}
});
function ease(x) {
return Math.sqrt(1 - Math.pow(x - 1, 2));
}
var doubleTapImg = document.getElementById("doubleTapImg");
Transform(doubleTapImg);
new AlloyFinger(doubleTapImg, {
doubleTap:function(){
if(doubleTapImg.scaleX===1){
new To(doubleTapImg, "scaleX", 2, 500, ease);
new To(doubleTapImg, "scaleY", 2, 500, ease);
}else if(doubleTapImg.scaleX===2){
new To(doubleTapImg, "scaleX", 1, 500, ease);
new To(doubleTapImg, "scaleY", 1, 500, ease);
}
}
});
var swipeScroll = document.getElementById("swipeScroll"),
currentIndex=0;
Transform(swipeScroll);
function activeNav(index){
var items = document.querySelectorAll(".nuclear-nav a"),
i = 0,
len = items.length;
for (; i < len; i++) {
if (i === index) {
items[i].classList.add("active");
} else {
items[i].classList.remove("active");
}
}
}
new AlloyFinger(swipeScroll, {
touchMove:function(evt) {
if (Math.abs(evt.deltaX) >= Math.abs(evt.deltaY)) {
evt.preventDefault();
}
},
swipe:function(evt){
if(evt.direction==="Left"){
if(currentIndex<2) {
currentIndex++;
new To(swipeScroll, "translateX", -160 * currentIndex, 500, ease, function () {
activeNav(currentIndex);
});
}
}else if(evt.direction==="Right"){
if(currentIndex>0) {
currentIndex--;
new To(swipeScroll, "translateX", -160 * currentIndex, 500, ease, function () {
activeNav(currentIndex);
});
}
}
}
});
var longTapBox = document.getElementById("longTapBox");
Transform(longTapBox);
var overlay=document.getElementById("overlay");
new AlloyFinger(longTapBox, {
longTap:function(evt){
evt.preventDefault();
toggleDom(overlay);
}
});
var tapBox = document.getElementById("tapBox");
Transform(tapBox);
var overlay2=document.getElementById("overlay2");
new AlloyFinger(tapBox, {
tap:function(){
toggleDom(overlay2);
},
singleTap:function(){
console.log("singleTap")
},
doubleTap:function(){
console.log("doubleTap")
},
pointStart:function(){
console.log("pointStart")
}
});
function toggleDom(dom){
var displayValue=window.getComputedStyle(dom,null)["display"];
if(displayValue==="none"){
dom.style.display="block";
}else{
dom.style.display="none";
}
}