微信号:yogoup

介绍:网站性能提升与架构设计

腾讯开源的非常小巧的JS手势库

2016-05-29 20:22 杜亦舒

腾讯前端团队前几天在Github上发布了一个JS手势库 AlloyFinger


极其小巧,只有几K,但功能很全面,支持缩放、旋转、拖拽、单击、双击、滑动、长按


而且除了Dom对象外,还可以监听Canvas内元素的手势


在腾讯内部的应用已经非常广泛,例如 QQ群、QQ动漫、AlloyTeam 等团队和项目


官方示例



代码示例


实现对一个图片的移动和缩放


<!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


 
性能与架构 更多文章 Nginx的模块化设计 RAID - 提升I/O性能及数据安全 Mysql 查看表及索引空间大小 微信朋友圈的技术思路 jquery的ready方法实现原理
猜您喜欢 昨天两个小时的写代码LIVE你参加了吗? 漫画:软件开发的时间估算 开源SIP服务器 Kamailio 【2015基础研究干货】你懂白富美和二次元么?调研君来帮你