您的位置：首页 > Web前端 > JavaScript

hammer.js

2017-01-14 18:19 357 查看

hammer.js

hammer.js是一个开源的库，他可以的实现在移端开发的大多数事件，如：点击、滑动、拖动、多点触控等事件。hammer.js不需要依赖任何其他的js框架，并且整个框架非常小.

1. Pan：拖动事件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Document</title>
<style type="text/css">
div{width: 100px;height: 100px;background: red;position: absolute;}
</style>
</head>
<body>
<div></div>
</body>
<script type="text/javascript" src="Hammer.js"></script>
<script type="text/javascript">
var div = document.querySelector("div");
// 创建Hammer对象
var hDiv = new Hammer(div);

var divLeft = 0;
var divTop = 0;
// 拖拽事件
hDiv.on("panstart",function(){
divLeft = div.offsetLeft;
divTop = div.offsetTop;
})
// 拖拽移动事件
hDiv.on("panmove",function(e){
console.log(e.deltaX);
div.style.left = e.deltaX + divLeft + "px";
div.style.top = e.deltaY + divTop + "px";
})
</script>
</html>

2. Pinch:多指触控事件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Document</title>
<style type="text/css">
div{width: 200px;height: 200px;background: red;position: absolute;}
</style>
</head>
<body>
<div>手势放大缩小div</div>
</body>
<script type="text/javascript" src="Hammer.js"></script>
<script type="text/javascript">
var div = document.querySelector("div");
// 创建Hammer对象
var hDiv = new Hammer(document);

// pinch默认是不可用的，因为它们可能会导致元素被卡住，需要一下设置
hDiv.get('pinch').set({ enable: true });

var divW = div.offsetWidth;
hDiv.on("pinchstart",function(e){
divW = div.offsetWidth;
})
hDiv.on("pinchmove", function (e) {
var w = divW*e.scale;
if (w<100) {
w=100
}
div.innerHTML= w;
div.style.width = w + "px";
div.style.height = w + "px";
});
</script>
</html>

3. Press:点击事件

这个事件相当于PC端的Click事件，该不能包含任何的移动，最小按压时间为500毫秒，常用于我们在手机上用的“复制、粘贴”等功能。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Document</title>
<style type="text/css">
div{width: 200px;height: 200px;background: red;position: absolute;}
</style>
</head>
<body>
<div></div>
</body>
<script type="text/javascript" src="Hammer.js"></script>
<script type="text/javascript">
var div = document.querySelector("div");
// 创建Hammer对象
var hDiv = new Hammer(document);

// 点击事件
hDiv.on("press",function (e) {
console.log(e)
div.innerHTML = "press";
})
</script>
</html>

4. Rotate:多手指成圆型旋转事件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Document</title>
<style type="text/css">
div{width: 200px;height: 200px;background: red;position: absolute;}
</style>
</head>
<body>
<div>手势放大缩小div</div>
</body>
<script type="text/javascript" src="Hammer.js"></script>
<script type="text/javascript">
var div = document.querySelector("div");
// 创建Hammer对象
var hDiv = new Hammer(document);

// pinch默认是不可用的，因为它们可能会导致元素被卡住，需要一下设置
hDiv.get('rotate').set({ enable: true });

hDiv.on("rotate", function (e) {
div.innerHTML = e.angle;
div.style.transform = "rotate("+e.angle+"deg)"
});

</script>
</html>

5. Swipe:触屏滑动事件

在指定的dom区域内，一个手指快速的在触屏上滑动。即我们平时用到最多的滑动事件。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Document</title>
<style type="text/css">
div{width: 200px;height: 200px;background: red;position: absolute;}
</style>
</head>
<body>
<div></div>
</body>
<script type="text/javascript" src="Hammer.js"></script>
<script type="text/javascript">
var div = document.querySelector("div");
// 创建Hammer对象
var hDiv = new Hammer(document);

// 滑动事件
// hammer默认禁止了上下滑动事件：需要以下设置
hDiv.get('swipe').set({ direction: Hammer.DIRECTION_ALL });

hDiv.on("swipeleft swiperight swipeup swipedown",function(e){
console.log(e.type)
div.innerHTML = e.type;
})
</script>
</html>

6.Tap:点击事件

该事件最大点击时间为250毫秒，如果超过250毫秒则按Press事件进行处理。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Document</title>
<style type="text/css">
div{width: 200px;height: 200px;background: red;position: absolute;}
</style>
</head>
<body>
<div></div>
</body>
<script type="text/javascript" src="Hammer.js"></script>
<script type="text/javascript">
var div = document.querySelector("div");
// 创建Hammer对象
var hDiv = new Hammer(document);

// 点击事件
hDiv.on("tap",function (e) {
console.log(e)
div.innerHTML = "tap";
})
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： hammer.js 框架触控开源

相关文章推荐

新的分享

章节导航