youzhu知识点3

1 有个列表页面需要做一个类似于qq左滑删除的列子

这个样子的。
然后想到的肯定是
touchstart touchmove touchend 事件来进行操作，通过判断触摸开始结束点的相减值来执行移动操作。

$("li").on("click",function(e){
    e.preventDefault(); //阻止链接跳转
    var startX= e.pageX; //获取触摸点位置
    console.log("startX") 
})

然而这时候就不对了，网页上会打印出 undefined 未定义。同理在这样获取touchend的位置也会打印 undefined.
这是为什么呢？

于是在网上查找可以正确返回触摸事件的起始结束位置的横坐标点。

http://segmentfault.com/a/1190000003908191

这里面提到：

如果使用jquery绑定touch事件的话，获取touchstart，touchmove的触点坐标用 e.originalEvent.targetTouches[0].pageX，
获取touchend则用 e.originalEvent.changedTouches[0].pageX

所以代码应该是

$("li").on("touchstart" , function(e){
   e.preventDefault();
   var startX=e.originalEvent.targetTouches[0].pageX;
});
$("li").on("touchend" , function(e){
   e.preventDefault();
   var endX=e.originalEvent.changedTouches[0].pageX;
   var move = startX-endX;
   if(move>0){
      //向左移动时候代码
    }else{
     //向右移动时候代码
     }
});

补充：
今天在浏览博客园的时候，发现一篇文章关于触摸事件的解释

是分析在pc和移动端，获取鼠标或者触摸点的位置坐标。
在pc端，用的是onmousedown onmouseup onmousemove onmouseout 鼠标按键按下、按键起来、鼠标在元素上移动、鼠标从元素上离开。

canvas.onmousedown = function(e) {
    console.log(e.clientX, e.clientY);
}
canvas.onmouseup = function(e) {
    console.log(e.clientX, e.clientY);
}
canvas.onmousemove = function(e) {
    console.log(e.clientX, e.clientY);
}
canvas.onmouseout = function(e) {
    console.log(e.clientX, e.clientY);
}

pc可以通过clientX clientY 来获取点击的坐标

对于移动端而言，利用的是touchstart touchmove touchend

canvas.addEventListener("touchstart", function(e) {
    console.log(e.touches[0].pageX, e.touches[0].pageY);
});
canvas.addEventListener("touchmove", function(e) {
    if(e.touches.length > 1 || e.scale && e.scale !== 1) return;
    console.log(e.touches[0].pageX, e.touches[0].pageY);
});
canvas.addEventListener("touchend", function(e) {});

The most important is that :

移动端由于是手指操作而非鼠标，所以存在多点触控，即多根手指在屏幕上触发事件。所以，不可以像PC通过e.clientX来获取单个点坐标。而是事件event中存在一个触控集合touches这个数组，通过取数组的第一个元素来获取坐标位置，即第一个触碰屏幕手指的坐标(e.touches[0].pageX , e.touches[0].pageY)。而有时往往有需要获取全部触碰点的位置，那就要循环数组了，逐个处理。另一个坑就是有时要防止多点触碰，以及手指对屏幕进行缩放的影响，可以加入以上判断if(e.touches.length > 1 || e.scale && e.scale != 1)。

最后就是touchend事件，代表手指离开屏幕不存在触控，所以e.touches这个数组的长度为0，也就不能在touchend的处理函数中获取pageX属性了。

2 登陆页面的刷新按钮
这个，每点击一次旋转360

最初的想法是通过控制class来实现旋转，代码如下

           $(".refresh").on("click",function(){
                $(this).addClass("torotate");
                setTimeout( function(){ 
                   $(".refresh").removeClass("torotate");
                }   , 3000)
            })

对应的css代码

.torotate{
   transform: rotate(360deg);
   -webkit-transform:rotate(360deg) ;
}

但是这样在执行定时器的时候，由于去除class ,图片会发生逆向旋转，不是想象的效果。

于是看到张大神的一篇通过控制css来实现’gif’的播放，所以想到可以利用这个原理。
http://www.zhangxinxu.com/wordpress/2015/12/css3-animation-js-canvas-gif-pause-stop-play/

现在代码如下
css部分

.refresh{animation: rotateimg 600ms infinite ease; float: right;    }
.torotate{
    animation-play-state: paused;
}
@keyframes rotateimg {
  0% {
    transform: rotate(0deg);
   -webkit-transform:rotate(0deg) ;
  }
  100% {
   transform: rotate(360deg);
   -webkit-transform:rotate(360deg) ;
  }
}

jq部分

           $(".refresh").on("click",function(){
               $(this).removeClass("torotate");
               setTimeout(function  () {
                $(".refresh").addClass("torotate");
               } , 600)
            })

bangbang bangbang