<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=0">
<style type="text/css">
</style>
</head>
<body>
<img src="img/cloud.png" alt="" id="target" />
<script src="js/touch.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//touch.js的旋转事件
//touch.js是百度开发的触摸事件库
//touch.on绑定事件 touch.off解除事件
//touch.on的参数
//参数1. 绑定事件的标签元素/选择器
//参数2.响应的事件类型(可以使用空格分割 添加多个事件)
//参数3.function事件响应后触发的方法
touch.on('#target', 'touchstart', function(ev) {
ev.preventDefault();
});
var target = document.getElementById("target");
var dx, dy;
touch.on('#target', 'drag', function(ev) {
dx = dx || 0;
dy = dy || 0;
// log("当前x值为:" + dx + ", 当前y值为:" + dy + ".");
var offx = dx + ev.x + "px";
var offy = dy + ev.y + "px";
this.style.webkitTransform = "translate3d(" + offx + "," + offy + ",0)";
});
touch.on('#target', 'dragend', function(ev) {
dx += ev.x;
dy += ev.y;
});
</script>
</body>
</html>
扫一扫
178
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
