手机滑动效果探索

这几天一直在跟touch事件打交道,各种摸索,结合css3做了一例类似弹簧式的滑动效果。手指滑动时,通过touches数组的target捕捉元素,同时当前元素前面元素进行缩放,该元素及index大于该元素的元素进行translate,

这样会有一种重叠的效果,当手指释放时,通过animate使整体滑动,并将元素状态恢复到最初。

js代码如下图:

 1 $(function(){
 2   var startX,startY,endX,endY,ChangeX,ChangeY,target,scroll,index;
 3   var initY=0,result=0
 4   document.getElementById("playContentContiner").addEventListener("touchstart",touchStart,false)
 5   document.getElementById("playContentContiner").addEventListener("touchmove",touchMove,false)
 6   document.getElementById("playContentContiner").addEventListener("touchend",touchEnd,false)
 7   function touchStart(event){
 8      //event.preventDefault();
 9      var touch=event.touches[0];
10      startX=touch.pageX;
11      startY=touch.pageY;
12      initY=result
13      scroll=$(window).scrollTop()
14   }
15   function touchMove(event){
16
17      var touchS=event.touches[0];
18      target=event.touches[0].target
19      endX=touchS.pageX;
20      endY=touchS.pageY;
21      ChangeX=endX-startX
22      changeY=endY-startY;
23      index=$(target).parents("li").index()
24      translate = changeY * 0.8;
25      //设定缩放参数
26      // $("#data").text("index="+index)
27      scale = Math.max((1-Math.abs(changeY/312)),0.95)*100;  //设定缩放比例,跟滑动距离相关,如果设定固定值,体验会很差
28      var offset=$("#playContentContiner").children().eq(index-1).offset().top
29      if(changeY<0){//向上滑动
30          if(index>1){//第一个没有动画
31            if(Math.abs(result)<250){    //设定缓动,手指滑动距离越大,元素滑动越慢,并设定最大滑动距离
32               event.preventDefault();
33               if(Math.abs(changeY)<100){
34                  result=(changeY+initY)/2
35               }else if(Math.abs(changeY)>=100&&changeY<200){
36                   result=(changeY+initY)/4
37               }else if(Math.abs(changeY)>=200&&changeY<250){
38                   result=(changeY+initY)/6
39               }else{
40                   return false
41               }
42
43               $("#playContentContiner li:lt("+(index-1)+")").css({"width":scale+"%","margin":"0px auto"})//目标元素前面的元素缩放
44               //目标元素后面元素位移
45              // alert($("#playContentContiner div:lt("+index+")").length)
46               $("#playContentContiner li:gt("+(index-2)+")").css({"z-index":"10","-webkit-transform":"translate3d(0," + (result) + "px,0)"})
47               $("#playContentContiner").children().eq(index).addClass("Upshadow")
48             }else{
49               return false
50             }
51          }
52      }else{//向下滑动
53         if(index<$("#playContentContiner").children().length){
54              if(Math.abs(result)<250){
55                 event.preventDefault();
56                 if(Math.abs(changeY)<100){
57                    result=(changeY+initY)/2
58                 }else if(Math.abs(changeY)>=100&&changeY<200){
59                     result=(changeY+initY)/4
60                 }else if(Math.abs(changeY)>=200&&changeY<250){
61                     result=(changeY+initY)/6
62                 }else{
63                     return false
64                 }
65
66                 $("#playContentContiner li:gt("+(index-1)+")").css({"width":scale+"%","margin":"0px auto","z-index":"0"})
67                 $("#playContentContiner li:lt("+index+")").css({"z-index":"10","-webkit-transform":"translate3d(0," + (translate) + "px,0)"})
68                 $("#playContentContiner").children().eq(index).addClass("Downshadow")
69              }else{
70                  return false
71              }
72         }
73      }
74   }
75   function touchEnd(event){
76      //event.preventDefault();
77      if(changeY<0){
78          $(‘body‘).animate({scrollTop:-changeY+$(‘body‘).scrollTop()},500);
79         $("#playContentContiner li:lt("+index+")").css({"width":"100%","z-index":"0"})
80
81         $("#playContentContiner li:gt("+(index-2)+")").css({"-webkit-transform":"translate3d(0,0,0)"})
82
83         $("#playContentContiner").children().eq(index).removeClass("Upshadow")
84         result=0
85      }else{
86          $(‘body‘).animate({scrollTop:-changeY+$(‘body‘).scrollTop()},500);
87         $("#playContentContiner li:gt("+(index-1)+")").css({"width":"100%","z-index":"0"})
88         $("#playContentContiner li:lt("+(index+1)+")").css({"z-index":"10","-webkit-transform":"translate3d(0,0,0)"})
89         $("#playContentContiner").children().eq(index).removeClass("Downshadow")
90
91      }
92   }
93 })
时间: 2024-10-12 20:37:57

手机滑动效果探索的相关文章

CSS3超酷移动手机滑动隐藏側边栏菜单特效

这是一组共4种效果很炫酷的CSS3移动手机滑动隐藏側边栏菜单特效. 这四种效果各自是:默认的点击滑动側边栏菜单效果.带3D transforms的滑动側边栏效果.文字缩放和淡入淡出效果的滑动側边栏以及使用translate来实现滑动側边栏的效果. 每个滑动側边栏效果都带有从右到左淡入淡出的滑动过渡效果. 菜单条中的菜单项以一个接一个的方式显示,这样的效果是通过为它们分别加入 transition-delay 来实现的.以下来看看默认的滑动側边栏效果的制作方法. 插件中使用了font-awesom

iPhone手机解锁效果&amp;&amp;自定义滚动条&amp;&amp;拖拽--Clone&amp;&amp;窗口拖拽(改变大小/最小化/最大化/还原/关闭)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

css中overflow滑动效果在IOS中不流畅

最近新作的一个项目中遇到一个问题,有一段很长的表格,手机显示器展示不全,需要做滑动继续展示的效果: OK,很简单,使用overflow-x:auto;谷歌模拟器一切正常,安卓正常,可是打完包在IOS上,滑动效果慢到完全跟随手指的移动而移动,这样是肯定不行的经过百度发现了解决之道: -webkit-overflow-scrolling: touch; 度娘说这句话是启动了硬件加速的特性,所以滑动起来会非常流畅:不过会影响性能:经过测试,发现影响看不出,果断选择用它: 完美解决~~~~~~~

CSS3超酷移动手机滑动隐藏侧边栏菜单特效

这是一组共4种效果非常炫酷的CSS3移动手机滑动隐藏侧边栏菜单特效.这四种效果分别是:默认的点击滑动侧边栏菜单效果.带3D transforms的滑动侧边栏效果.文字缩放和淡入淡出效果的滑动侧边栏以及使用translate来实现滑动侧边栏的效果. 每一个滑动侧边栏效果都带有从右到左淡入淡出的滑动过渡效果.菜单栏中的菜单项以一个接一个的方式显示,这种效果是通过为它们分别添加 transition-delay 来实现的.下面来看看默认的滑动侧边栏效果的制作方法. 插件中使用了font-awesome

仿一个好玩的滑动效果

起因 昨天跑步的时候,看到一个app(华为手机自带的运动健康)上的滑动效果很有意思,回来之后就想着,能不能在dom上实现一下,于是有了这篇文章.首先看一下效果图,滑动下面的绿色滑块可以看到效果: 贴出app上的效果图,模仿效果可以说是差强人意吧: 实现 其实原理很简单,就是在小圆点移动时,计算数字和小圆点的距离,来控制数字的上升和下降. 首先,要使小圆点跟随鼠标移动起来:代码如下: slide.addEventListener('mousedown', function(e){ e.preven

实现ViewPager多页面滑动效果

 viewPager实现引导页 ViewPager多页面滑动效果 1.Android的左右滑动在实际编程经常能用到,比如查看多张图片,左右 切换tab页. 2.自android 3.0之后的SDK中提供了android-support-V4包用以实现 版本兼容,让老版本系统下的应用通过加入jar包实现扩展,其中有一 个可以实现左右滑动的类ViewPager 今天我们就用ViewPager类来实现引导页的实战案例 实现功能: 1.实现ViewPager多页面滑动效果. 2.下方的显示当前焦点页

android UI之ViewPager多页面滑动效果

  viewPager实现引导页 ViewPager多页面滑动效果 1.Android的左右滑动在实际编程经常能用到,比如查看多张图片,左右 切换tab页. 2.自android 3.0之后的SDK中提供了android-support-V4包用以实现 版本兼容,让老版本系统下的应用通过加入jar包实现扩展,其中有一 个可以实现左右滑动的类ViewPager 今天我们就用ViewPager类来实现引导页的实战案例 实现功能: 1.实现ViewPager多页面滑动效果. 2.下方的显示当前

Android第六期 - ViewPage与菜单栏本地页面监听滑动效果

首先是JiaoyuzixunActivity.java代码部分: package com.gaoxiaotong.ctone.jiaoyuzixun; import java.util.ArrayList; import java.util.HashMap; import java.util.Iterator; import java.util.List; import java.util.Map; import org.json.JSONArray; import org.json.JSONO

Android 自定义 HorizontalScrollView 打造再多图片(控件)也不怕 OOM 的横向滑动效果

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38140505 自从Gallery被谷歌废弃以后,Google推荐使用ViewPager和HorizontalScrollView来实现Gallery的效果.的确HorizontalScrollView可以实现Gallery的效果,但是HorizontalScrollView存在一个很大的问题,如果你仅是用来展示少量的图片,应该是没问题的,但是如果我希望HorizontalScr