Touch.js应用

最新推荐文章于 2021-01-10 14:50:20 发布

赵忠洋

最新推荐文章于 2021-01-10 14:50:20 发布

阅读量544

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/qq_32930863/article/details/62435107

JavaScript 专栏收录该内容

16 篇文章

订阅专栏

Touch.js应用

基本事件

tap(单击)
doubletap(双击)
rotate(旋转)
swipe(滑动)
drag(拖拽)

基本语法

    touch.on('选择器','事件',fn)

单击事件(tap)

单击事件一般使用原生js写因为tap有时会出现点透(事件冒泡)

    touch.on(".box","tou    chstart",function(ev){
     ev.preventDefault()
     //阻止事件冒泡，阻止默认事件
    })
    touch.on(".box","touchstart",function(){
        alert("11111")
    })

滑动事件(swipe)

    var box=document.getElementsByClassName("box")[0];
    box.style.webkitTransition='all ease 0.2s'
    touch.on(".box","swipeleft",function(){
        box.style.webkitTransform='translate3d('+-box.offsetLeft+'px,0,0)'
    })
    touch.on(".box","swiperight",function(){
        box.style.webkitTransform='translate3d('+box.offsetLeft+'px,0,0)'
    })

拖拽事件(drag)

var box=document.getElementsByClassName("box")[0];
box.style.webkitTransition='all ease 0.2s';
var x=0;
var y=0;
    touch.on(".box","drag",function(e){
        _x=e.x;
        _y=e.y;
        ox=x+_x;
        oy=y+_y;
        box.style.webkitTransform='translate3d('+ox+'px,'+oy+'px,0)'
    })
    touch.on(".box","dragend",function(e){
        x=x+_x;
        y=y+_y;
    })

旋转事件(rotate)

touch.on('.box','touchstart',function(e){
            e.preventDefault();
            e.startRotate()
    })
var box=document.getElementsByClassName("box")[0];
box.style.webkitTransition='all ease 0.2s';
var dage=0
touch.on(".box","rotate",function(e){
    var Tdage=dage+e.rotation;
    box.style.webkitTransform='rotate('+Tdage+'deg)'
})

HTML及CSS代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/touch.js" ></script>
<style>
    .box{
        width: 100px;
        height: 100px;
        background: skyblue;
        border: 1px solid slateblue;
        margin: 0 auto;
    }
</style>
</head>
<body>
    <div class="box">sadasdas</div>
</body>
</html>