javascript - 求助，这个效果怎么在移动端浏览器实现？

Question

最近公司新来的技术总监，让我写出探探app主页的这个效果，说是为了考察我的技术水平，我想了半天以我自己目前的水平，还是写不出来的，然后打算到网上搜搜相关案例研究下，可是根本找不到，只有基于安卓的这个，用java写的，根本看不懂，求大神们帮帮我，我要疯了！！！

Answer 1

感觉和 Tinder 的交互效果蛮像，搜了一下，但只找到一篇用 Swift 实现的翻译文章，思路应该可以借鉴一下
[译] 如何创建一个类似 Tinder 的交互动画（iOS）

如果按问题分类（javascript html5 html css)去想，应该和 javascript 的 onmousemove ， css 的 transform:rotate(deg) 、 position 、 z-index 等相关，希望对你有帮助

Answer 2

提供一下思路，
先将卡片定位在中间，
控制卡片和手指一起移动。
记录下拖动时候，手指的开始点和结束点，确定手指的移动距离。
距离大于某个值的时候，分析是上下移动还是左右移动。举例，向右上方移动时候，若向上移动的距离大于向右移动的距离，则可以判定为向上移动。这个规则可以自己定义。
上下移动就让卡片回到中央。可以使用css3的transition和transform。
左右移动就让卡片移动到左右两边，要分析到底是向左还是向右。

最关键的点就是对touch事件使用，touch事件的数据获取和分析，其次是css3的使用

没用过其他人说的drag方法，不好做评论

Answer 3

js原生的touch时间的应用，你去研究一下touch对象，大概思路是先给p用relative定位，再absolute不断覆盖，然后给每个p绑定touchstart时间，touchmove以及touchend时间

var imgObj = document.getElementsByClassName("car_img");
for(var i=0;i<imgLen;i++){
    imgObj[i].addEventListener('touchstart',touchstart,false);
    imgObj[i].addEventListener('touchmove',touchmove,false);
    imgObj[i].addEventListener('touchend',touchend,false);
}

这样touch时间就绑定了，然后可以写这三个函数，记得带上event对象

function touchstart(event){
    event.preventDefault();//阻值时间的默认行为
    if( event.targetTouches.length == 1 )//event.targetTouches是一个手指列表的数据对象
    {
        console.log(event.targetTouches);//可以具体打印一下里面的这个对象里面的属性，东西还是挺多的，自己研究下吧
        var touch = event.targetTouches[0];
        pressX = touch.pageX，
        pressY = touch.pageY;//获取手指的初始坐标
    }
}

function touchmove(event){
    //这是手指移动的函数，在不断执行
    event.preventDefault();
    if(event.targetTouches.length == 1)//再次判断是不是一根手指
    {
        var spanX = touch.pageX，
            sapnY = touch.pageY;//手指不断移动的左边
        this.style.left = spanX -pressX + "px"；//左右移动
        this.style.right = sapnY - pressX + "px";//上下移动
    }
}
function touchend(event){
   //这里面执行消失或者弹回函数，可以使用jq里面的animate方法
}

这是我的大概思路，你可以参考一下