腾讯开源的非常小巧的JS手势库
腾讯前端团队前几天在Github上发布了一个JS手势库 AlloyFinger
极其小巧，只有几K，但功能很全面，支持缩放、旋转、拖拽、单击、双击、滑动、长按
而且除了Dom对象外，还可以监听Canvas内元素的手势
在腾讯内部的应用已经非常广泛，例如 QQ群、QQ动漫、AlloyTeam 等团队和项目
官方示例
http://alloyteam.github.io/AlloyFinger/
代码示例
实现对一个图片的移动和缩放
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<!--引入JS库-->
<script src="asset/transform.js"></script>
<script src="alloy_finger.js"></script>
<script src="asset/to.js"></script>
</head>
<body>
<img id="Img" src='3.jpg' width="160px" />
<script type="text/javascript">
var targetImg = document.getElementById("Img");
Transform(targetImg);
var initScale = 1;
new AlloyFinger(targetImg, {
// 移动
pressMove: function(evt) {
targetImg.translateX += evt.deltaX;
targetImg.translateY += evt.deltaY;
evt.preventDefault();
},
// 多点触摸开始
multipointStart: function() {
initScale = targetImg.scaleX;
},
// 缩放
pinch: function(evt) {
targetImg.scaleX = targetImg.scaleY = initScale * evt.scale;
}
});
</script>
</body>
</html>项目地址
https://github.com/AlloyTeam/AlloyFinger
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2016-05-29，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读