最近公司新来的技术总监,让我写出探探app主页的这个效果,说是为了考察我的技术水平,我想了半天以我自己目前的水平,还是写不出来的,然后打算到网上搜搜相关案例研究下,可是根本找不到,只有基于安卓的这个,用java写的,根本看不懂,求大神们帮帮我,我要疯了!!!
最近公司新来的技术总监,让我写出探探app主页的这个效果,说是为了考察我的技术水平,我想了半天以我自己目前的水平,还是写不出来的,然后打算到网上搜搜相关案例研究下,可是根本找不到,只有基于安卓的这个,用java写的,根本看不懂,求大神们帮帮我,我要疯了!!!
提供一下思路,
先将卡片定位在中间,
控制卡片和手指一起移动。
记录下拖动时候,手指的开始点和结束点,确定手指的移动距离。
距离大于某个值的时候,分析是上下移动还是左右移动。举例,向右上方移动时候,若向上移动的距离大于向右移动的距离,则可以判定为向上移动。这个规则可以自己定义。
上下移动就让卡片回到中央。可以使用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方法
}
这是我的大概思路,你可以参考一下
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3.1k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
5 回答1.9k 阅读
感觉和 Tinder 的交互效果蛮像,搜了一下,但只找到一篇用 Swift 实现的翻译文章,思路应该可以借鉴一下
[译] 如何创建一个类似 Tinder 的交互动画(iOS)
如果按问题分类(javascript html5 html css)去想,应该和 javascript 的 onmousemove , css 的 transform:rotate(deg) 、 position 、 z-index 等相关,希望对你有帮助