alloyfinger
Version:
super tiny size multi-touch gestures library for the web.
138 lines (125 loc) • 5.21 kB
HTML
<html>
<head>
<title>AlloyFinger</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<style>
.ribbon {
top: 3.2em;
right: -4.7em;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
color:#fff;
display: block;
padding: .6em 3.5em;
position: fixed;
text-align: center;
text-decoration: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: green;
z-index: 10000;
}
</style>
</head>
<body>
<a href="https://github.com/AlloyTeam/AlloyFinger" class="ribbon">Fork me on Github</a>
<script src="../../asset/transform.js"></script>
<script src="../../alloy_finger.js"></script>
<script src="../../asset/image_loaded.js"></script>
<script src="../../asset/to.js"></script>
<div id="imgBox" style="position:fixed;width: 100%;height: 100%;left:0;top:0;
background:black;display: none;">
<img src="../../asset/cover.jpg" id="testImg" alt="" style="width: 100%;position: absolute; " />
</div>
<script>
var topPx;
imageLoaded("#testImg",function(w,h){
document.querySelector("#imgBox").style.display="block";
topPx=window.innerHeight/2-(h*window.innerWidth/w)/2;
this.style.top=topPx+"px";
});
function ease(x) {
return Math.sqrt(1 - Math.pow(x - 1, 2));
}
var el = document.getElementById("testImg");
Transform(el);
var initScale = 1;
new AlloyFinger(el, {
multipointStart: function () {
To.stopAll();
initScale = el.scaleX;
},
rotate: function (evt) {
el.rotateZ += evt.angle;
},
pinch: function (evt) {
el.scaleX = el.scaleY = initScale * evt.zoom;
},
multipointEnd: function () {
To.stopAll();
if (el.scaleX < 1) {
new To(el, "scaleX", 1, 500, ease);
new To(el, "scaleY", 1, 500, ease);
}
if (el.scaleX > 2) {
new To(el, "scaleX", 2, 500, ease);
new To(el, "scaleY", 2, 500, ease);
}
var rotation = el.rotateZ % 360;
if (rotation < 0)rotation = 360 + rotation;
el.rotateZ=rotation;
if (rotation > 0 && rotation < 45) {
new To(el, "rotateZ", 0, 500, ease);
} else if (rotation >= 315) {
new To(el, "rotateZ", 360, 500, ease);
} else if (rotation >= 45 && rotation < 135) {
new To(el, "rotateZ", 90, 500, ease);
} else if (rotation >= 135 && rotation < 225) {
new To(el, "rotateZ", 180, 500, ease);
} else if (rotation >= 225 && rotation < 315) {
new To(el, "rotateZ", 270, 500, ease);
}
},
pressMove: function (evt) {
el.translateX += evt.deltaX;
el.translateY += evt.deltaY;
evt.preventDefault();
},
tap: function (evt) {
//console.log(el.scaleX + "_" + el.scaleY + "_" + el.rotateZ + "_" + el.translateX + "_" + el.translateY);
//console.log("tap");
},
doubleTap: function (evt) {
To.stopAll();
if (el.scaleX > 1.5) {
new To(el, "scaleX", 1, 500, ease);
new To(el, "scaleY", 1, 500, ease);
new To(el, "translateX", 0, 500, ease);
new To(el, "translateY", 0, 500, ease);
} else {
var box = el.getBoundingClientRect();
var y = box.height - (( evt.changedTouches[0].pageY - topPx) * 2) - (box.height / 2 - ( evt.changedTouches[0].pageY - topPx));
var x = box.width - (( evt.changedTouches[0].pageX) * 2) - (box.width / 2 - ( evt.changedTouches[0].pageX));
new To(el, "scaleX", 2, 500, ease);
new To(el, "scaleY", 2, 500, ease);
new To(el, "translateX", x, 500, ease);
new To(el, "translateY", y, 500, ease);
}
//console.log("doubleTap");
},
longTap: function (evt) {
//console.log("longTap");
},
swipe: function (evt) {
//console.log("swipe" + evt.direction);
}
});
</script>
</body>
</html>