touchDemo

最新推荐文章于 2023-04-22 21:34:20 发布

司南九九

最新推荐文章于 2023-04-22 21:34:20 发布

阅读量226

点赞数

文章标签： app触摸滑动

本文链接：https://blog.csdn.net/weixin_42692719/article/details/81042397

版权

 
  <!DOCTYPE html 
  > 
 
 
  < 
  html 
  lang= 
  "en" 
  > 
 
 
  < 
  head 
  > 
 
 
  < 
  meta 
  charset= 
  "UTF-8" 
  > 
 
 
  < 
  meta 
  name= 
  "viewport" 
  content= 
  "width=device-width, initial-scale=1.0" 
  > 
 
 
  < 
  meta 
  http-equiv= 
  "X-UA-Compatible" 
  content= 
  "ie=edge" 
  > 
 
 
  < 
  title 
  >Document 
  </ 
  title 
  > 
 
 
  < 
  style 
  > 
 
 
  body,html{ 
 
 
  margin: 
  0; 
 
 
  height: 
  100%; 
 
 
  width: 
  100%; 
 
 
  overflow: 
  hidden; 
 

   } 
 
 
  #app{ 
 
 
  width: 
  200px; 
 
 
  height: 
  200px; 
 
 
  background: 
  blue; 
 

   } 
 
 
  < 
  / 
  style 
  > 
 
 
  </ 
  head 
  > 
 
 
  < 
  body 
  > 
 
 
  < 
  div 
  id= 
  "app" 
  ></ 
  div 
  > 
 
 
  </ 
  body 
  > 
 
 
  < 
  script 
  > 
 
 
  //touch事件分为三步，开始，触摸，结束 
 
 
  //首先获取到app这个元素 
 
 
  let 
  app= 
  document. 
  getElementById( 
  "app") 
 
 
  let 
  startX, 
  startY, 
  endX= 
  null, 
  endY= 
  null; 
 

 
  app. 
  addEventListener( 
  "touchstart", 
  function( 
  event){ 
 
 
  //首先找到手指开始的位置 
 
 
  // let startX=event.targetTouches[0].clientX 
 
 
  // let startY=event.targetTouches[0].clientY 
 
 
  //结构函数写 
 
 
  console. 
  log( 
  "触摸开始") 
 
 
  console. 
  log( 
  event, 
  222222) 
 
 
  let { 
  clientX, 
  clientY}= 
  event. 
  touches[ 
  0] 
 
 
  startX= 
  clientX 
 
 
  startY= 
  clientY 
 
 
  // console.log(startX,startY) 
 

   }) 
 
 
  app. 
  addEventListener( 
  "touchmove", 
  function( 
  event){ 
 
 
  //手指移动的时候的位置 
 
 
  console. 
  log( 
  "触摸移动") 
 
 
  let { 
  clientX: 
  x, 
  clientY: 
  y}= 
  event. 
  touches[ 
  0] 
 
 
  // console.log(x,y) 
 
 
  //移动的距离 
 
 
  let 
  moveX= 
  x- 
  startX; 
 
 
  let 
  moveY= 
  y- 
  startY 
 
 
  // console.log(moveX,moveY) 
 
 
  //进行判断，如果是第一次触摸那么触摸结束的位置等于手指移动最后的位置 
 
 
  //如果end的值不为空，那么移动的距离是前一个end的距离加上移动的距离 
 
 
  if( 
  endX!== 
  null){ 
 
 
  moveX+= 
  endX 
 
 
  moveY+= 
  endY 
 

   } 
 
 
  this. 
  style. 
  transform= 
  `translate( 
  ${ 
  moveX 
  } 
  px, 
  ${ 
  moveY 
  } 
  px)` 
 

   }) 
 
 
  app. 
  addEventListener( 
  "touchend", 
  function( 
  event){ 
 
 
  //在触摸结束之后，要将最后得到的值赋值给触摸开始的值 
 
 
  console. 
  log( 
  "触摸结束") 
 
 
  let 
  style= 
  this. 
  style. 
  transform 
 
 
  style= 
  style. 
  replace( 
  "translate(", 
  "") 
 
 
  style= 
  style. 
  replace( 
  /px/ 
  g, 
  "") 
 
 
 
 
  // console.log(style) 
 
 
  style= 
  style. 
  replace( 
  ")", 
  "") 
 
 
  // console.log(style) 
 
 
  style= 
  style. 
  split( 
  ",") 
 
 
  // console.log(style) 
 
 
  endX= 
  style[ 
  0]* 
  1 
 
 
  endY= 
  style[ 
  1]* 
  1 
 
 
  console. 
  log( 
  style) 
 


   }) 
 
 
  < 
  / 
  script 
  > 
 

</html>