分享一段代码实例,他实现了移动端触屏拖动效果。
代码实例如下:
   [ 其他 ] 运行代码    下载代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51qianduan.com/" />
<title>51前端</title>
<style>
.box {
  width: 100px;
  height: 100px;
  background: red;
}
</style>
<script> 
function Touch(ele) {
  var _this = this;
  this.ele = ele;
  this.transP = {
    x: 0,
    y: 0
  };
  this.events = {
    handleEvent: function(event) {
      switch (event.type) {
        case 'touchstart':
          _this.start(event);
          break;
        case 'touchmove':
          _this.move(event);
          break;
        case 'touchend':
          _this.end(event);
          break;
      }
    }
  }
}
  
Touch.prototype = {
  start: function(ev) {
    var touches = ev.targetTouches[0],
      _this = this;
    this.disP = {
      x: touches.pageX - this.transP.x,
      y: touches.pageY - this.transP.y,
      id: touches.identifier
    };
    console.log('aaa');
    document.addEventListener('touchmove', _this.events, false);
    document.addEventListener('touchend', _this.events, false);
  },
  move: function(ev) {
    var touches = ev.targetTouches[0];
    if (touches.identifier == this.disP.id) {
      console.log('move');
      this.transP = {
        x: touches.pageX - this.disP.x,
        y: touches.pageY - this.disP.y
      };
      this.ele.style.transform = 'translate3d(' + this.transP.x + 'px,' + this.transP.y + 'px,0)';
      this.ele.style.Webkittransform = 'translate3d(' + this.transP.x + 'px,' + this.transP.y + 'px,0)';
    }
  },
  end: function(ev) {
    ev = ev || window.event;
    var _this = this;
    if (ev.changedTouches[0].identify == this.disP.id) {
      document.removeEventListener('touchmove', _this.events, false);
      document.removeEventListener('touchend', _this.events, false);
    }
  },
  init: function() {
    var _this = this;
    this.ele.addEventListener('touchstart', _this.events, false);
  }
};
window.onload = function() {
  var box = document.querySelector('#box'),
    touch = new Touch(box);
  touch.init();
};      
</script>
</head>
<body>
<div id="box" class="box"></div>
</body>
</html>

代码描述:JavaScript 移动端 拖动效果。JavaScript移动端触屏拖动效果



137 182



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到