Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

在触屏手机上实现的图片拖动

  先看代码吧,后面再做说明。这个代码有点长,不过没什么技术含量,很容易看完。 <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN">
<meta name="viewport" content="user-scalable=0" />
<style>
* {margin:0px;padding:0px;}
.panel {
  position:absolute;
  left:0px;top:0px;
  height:100%;
  width:100%;
  overflow:hidden;
  background:rgba(0,0,0,0.1);
}
.picture {
  position:absolute;
  left:0px;top:0px;
  height:100%;
  width:100%;
}
.picture img {
  position:absolute;
  left:50%;top:50%;
  margin:-162px -225px;
}
</style>
<script>
//文档加载完成事件,如果SCRIPT标签在尾部就可以不用它
window.onload=function(){
  //获取元素
  var picture=document.getElementById("picture");
  //添加触屏开始事件
  picture.addEventListener("touchstart",function(e){
    var p,f1,f2;
    //由于触屏的坐标是个数组,所以取出这个数组的第一个元素
    e=e.touches[0];
    //保存picture和开始触屏时的坐标差
    p={
      x:picture.offsetLeft-e.clientX,
      y:picture.offsetTop-e.clientY
    };
    //添加触屏移动事件
    document.addEventListener("touchmove",f2=function(e){
      //获取保触屏坐标的对象
      var t=t=e.touches[0];
      //把picture移动到初始计算的位置加上当前触屏位置
      picture.style.left=p.x+t.clientX+"px";
      picture.style.top=p.y+t.clientY+"px";
      //阻止默认事件
      e.preventDefault();
    },false);
    //添加触屏结束事件
    document.addEventListener("touchend",f1=function(e){
      //移除在document上添加的两个事件
      document.removeEventListener("touchend",f1);
      document.removeEventListener("touchmove",f2);
    },false);
  },false);
};
</script>
<div class="panel">
  <div class="picture" id="picture">
    <img src="http://www.web-tinker.com/images/TheMagicConch.jpg" />
  </div>
</div>
  第一行是移动设备上的文档类型,这里使用了移动设备的类型。第二行是一个meta,他告诉移动设备上的浏览器禁止用户对网页缩放。一般开发手机网页都会有这两个声明。
  接着看HTML和CSS。为了让图片初始居中显示,我使用了绝对定位的margin负值方法。top和left使用百分比是从容器(这里的容器指的是祖先元素中最近的一个非静态定位元素)。由于上面代码中的IMG标签的容器是满屏的大小,所以IMG设置50%的top和left后就会被移动到屏幕中央。但是这是IMG元素的左上角被移动到屏幕中央。但是我们需要把图片往回移动半个图片的宽度高度的距离才能让图片在屏幕中央。所以我们把margin设置成图片宽度高度一半的负值来调整这个。居中的问题解决了之后就要开始写JS部分吧?可是IMG元素为了居中把top和left使用了。所以我们需要再嵌套一个元素来作为程序里的定位,这就是为什么我这个代码看上去这个么长。其实如果要方便也可以把居中的代码直接写进JS里,正常情况是直接在JS里计算比较好的。不过偶尔也有一些项目有特殊需求,所以我就顺便说了这个CSS的方法。
  然后就是JS部分,其实非常简单。和PC版的实现过程基本相同,只是事件有些变化而已。反正上面有注释,我就不逐行说明了。如果有不理解的就直接提问吧。
  在触屏手机上实现的图片拖动
网名:
34.203.213.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^