39,118
社区成员




<!doctype html>
<html><head>
<meta charset="utf-8">
<meta name="viewport" content=" user-scalable=yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>试试看</title>
<style type="text/css">
body {
margin: 0px;
background-color: #000;
background-image: url();
}
</style>
</head>
<body >
<div id="main" style="z-index:1;margin:0px;padding:0px; height:100%;width:100%;top:0;left:0;">
<img src="quwei_pic2_.png" id="pic1" name="pic1" height="201" width="100%" align="absmiddle">
<script type="text/javascript" src="canvasScript.js" charset="utf-8"></script>
</div>
</body>
</html>
var canvas = document.getElementById("pic1");
canvas.addEventListener('touchstart', onTouchStart, false);
canvas.addEventListener("touchmove", onTouchMove, false);
canvas.addEventListener("resize", onResize, false);
canvas.style.position="absolute";
var lostX,lostY,lastoffX,lastoffY;
function onResize(event)
{
//这里 我调用这个原本想,只图片响应默认的缩放行为,不在缩放的消息向下传递造成div的缩放,
//但是实际没效果....好吧其实我一点也不会js
event.preventDefault();
}
function onTouchStart(event) {
if (event.touches.length == 1) {
lostX = event.targetTouches[0].clientX;
lostY= event.targetTouches[0].clientY;
lastoffX = canvas.offsetLeft;
lastoffY = canvas.offsetTop;
}
}
function onTouchMove(event) {
if (event.touches.length == 1) {
event.preventDefault();
var x,y;
x = event.targetTouches[0].clientX - lostX;
y = event.targetTouches[0].clientY - lostY;
canvas.style.left = (lastoffX + x) + 'px';
canvas.style.top = (lastoffY + y) + 'px';
//canvas.style.webkitTransform = 'translate(' + x + 'px, ' + y + 'px)';
else if(event.touches.length == 1)
{
event.preventDefault();
//这里我想自己实现缩放 从中心开始缩放,类似苹果那种,可是不会js实在写不出来了 求指教
}
}
}