<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=0">
<title></title>
</head>
<body>
<img src="img/cloud.png" id="target" />
<script src="js/touch.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var target = document.getElementById("target");
target.style.webkitTransition = 'all ease 0.05s';
touch.on('#target', 'touchstart', function(ev) {
ev.preventDefault();
});
var initialScale = 1;
var currentScale;
touch.on('#target', 'pinchend', function(ev) {
currentScale = ev.scale - 1;
currentScale = initialScale + currentScale;
currentScale = currentScale > 2 ? 2 : currentScale;
currentScale = currentScale < 1 ? 1 : currentScale;
this.style.webkitTransform = 'scale(' + currentScale + ')';
console.log("当前缩放比例为:" + currentScale + ".");
});
touch.on('#target', 'pinchend', function(ev) {
initialScale = currentScale;
});
</script>
</body>
</html>
扫一扫
1063
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
