求助,这个效果怎么在移动端浏览器实现?

图片描述

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

阅读 3.5k
3 个回答

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

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

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

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

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

js原生的touch时间的应用,你去研究一下touch对象,大概思路是先给div用relative定位,再absolute不断覆盖,然后给每个div绑定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方法
}

这是我的大概思路,你可以参考一下
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题