如何禁止div缩放求救

bingying19872008 2013-11-19 11:37:22
<!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>

在苹果手机上打开时,我希望两根手指的缩放紧紧影响图片而不影响层,可实际却是div也跟着缩放了....求救 这样会影响到其他div的布局啊
...全文
511 5 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
KK3K2005 2013-11-19
  • 打赏
  • 举报
回复
http://www.yingxiangzhi.com/blog/?p=1434
bingying19872008 2013-11-19
  • 打赏
  • 举报
回复
引用 3 楼 KK3K2005 的回复:
zygan 有个iscroll js 或者 iscroll js最新版本 貌似有直接支持 手势缩放的功能
可以有地址下载么或则能看看代码也好啊
KK3K2005 2013-11-19
  • 打赏
  • 举报
回复
zygan 有个iscroll js 或者 iscroll js最新版本 貌似有直接支持 手势缩放的功能
bingying19872008 2013-11-19
  • 打赏
  • 举报
回复
引用 1 楼 KK3K2005 的回复:
这个时候 我会禁止页面的 用户缩放行为 但是我会单独给图片添加手势缩放的js
我一开始 也很想,无奈我对网页编程一点不熟悉,另一个做网页的是新人,公司让我解决 .... 我无耻的求代码吧 我试着写了一个js,实现的禁止了页面的拖动,

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实在写不出来了 求指教
    }
    }
}
KK3K2005 2013-11-19
  • 打赏
  • 举报
回复
这个时候 我会禁止页面的 用户缩放行为 但是我会单独给图片添加手势缩放的js

39,118

社区成员

发帖
与我相关
我的任务
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
社区管理员
  • HTML5社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧