touchtool检测鼠标或手势滑动方向的插件-BFW插件库

touchtool检测鼠标或手势滑动方向的插件

使用方式：

第一步引入bfwone

第二步use插件

第三步配置参数

new TouchTool({
    'obj': document.getElementById('touchBox'),//滑动区域
    'direction': 'vertical', //horizontal水平 vertical垂直
    'slideUp': function() {//上滑触发
        console.log('u')
    },
    'slideDown': function() {//下滑触发
        console.log('d')
    },
    'slideLeft': function() {//左滑触发
        console.log('l')
    },
    'slideRight': function() {//右滑触发
        console.log('r')
    }
})

示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone"  type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["touchtool"], function() {
                new TouchTool({
                    'obj': document.getElementById('touchBox-v'),
                    'direction': 'vertical', //horizontal vertical水平垂直
                    'slideUp': function() {
                        alert('上滑了一下')
                    },
                    'slideDown': function() {
                        alert('下滑了一下')
                    }
                })
                new TouchTool({
                    'obj': document.getElementById('touchBox-h'),
                    'direction': 'horizontal', //horizontal vertical水平垂直
                    'slideLeft': function() {
                        alert('左滑了一下')
                    },
                    'slideRight': function() {
                        alert('右滑了一下')
                    }
                })
            });
        });
    </script>
    <style>
    .box{
        height: 50vh;
        width: 100%;
        line-height: 50vh;
        text-align: center;
        background: blue;
        color: white;
        margin-bottom: 10px;
    }
    </style>
</head>
<body>
    <div id="touchBox-v" class="box">
        垂直划我试试

    </div>
    <div id="touchBox-h" class="box">
        切换到水平划动
    </div>
</body>
</html>

touchtool检测鼠标或手势滑动方向的插件

网友评论0

gridly.js

jquery-resizable.js

drag.js

draggabilly.js

impetus.min.js

jquery.dad.min.js

subjx.js

interact.min.js

subj.js

moveable.min.js