android gallery实现div左右滑动

效果图:

随着手指在移动设备上滑动,DIV也随着滚动.想看效果,可以download代码,用手机来测试.

(在目前的移动设备上,内部块元素是不支持滚动条的!)

 

实现原理:核心利用DIV的overflow: hidden; 和scrollleft和scrollwidth完成.

实现步骤:

1. 画页面.首先获取body可视区域的宽,然后减去div控件的左右margin值,再除以3,取四舍五入后的值

相关代码:

var bodyWidth = $("body").width();
var testWidth = Math.round((bodyWidth - 20) / 3);

2. 每一个日期加上下面的字母为一个DIV,这个DIV的高度为上面计算得出的.讲获得的日期数据,全部组装成DIV,加入到body中.

1 $.each(dateRate.data, function(i, item) {
2                 if(item.date == currentDate) {
3                     currentDateIndex = i;
4 }
5 
6                 $("<div   style='width:" + datePriceWidth + "px'><div>" + item.date + "</div><div>" + item.cheapest + "</div></div>").appendTo("#timelines");
7             });

3.经过上面这一步,在timelines为ID的DIV控件中,最少只显示3个日期,其他的日期则隐藏在body可视区域右边

4.给timelines控件添加手指触摸事件

 1         //定义touchstart事件
 2             document.getElementById("timelines").addEventListener("touchstart", function(ev) {
 3                 ev.preventDefault();//一定要阻止默认事件
 4                 $("#timelines").stop(true, false);//停止之前的动画
 5                 var x = ev.touches[0].pageX;//获得手指触摸点的X坐标
 6                 var y = ev.touches[0].pageY;//获得手指触摸点的Y坐标
 7                 soucePoint = new Point(x, y);
 8                 lastPoint = soucePoint;
 9                 touchStartTimestamp = new Date().getTime();//获得当前时间戳
10             }, false);
11             //定义touchmove事件
12             document.getElementById("timelines").addEventListener("touchmove", function(ev) {
13                 ev.preventDefault();
14                 var x = ev.touches[0].pageX;
15                 var y = ev.touches[0].pageY;
16 
17                 var scrollLeft = $("#timelines").scrollLeft();
18                 $("#timelines").stop(true, false);

　　　　　　　　　　　　//计算每次滑动距离,如果小于等于2则不处理.(手指在屏幕会有些许抖动)
19                 if(x - lastPoint.x > 2) {
20                     scrollLeft = scrollLeft - (x - lastPoint.x > 0 ? ((x - lastPoint.x)) : (-(x - lastPoint.x)));
21                 } else if(x - lastPoint.x < -2) {
22                     scrollLeft = scrollLeft + (lastPoint.x - x < 0 ? (-(lastPoint.x - x)) : ((lastPoint.x - x)));
23                 }
24                 lastPoint = new Point(x, y);

　　　　　　　　　　　　//利用juqery动画将scrollleft向左滚动(默认是0)
25                 $("#timelines").animate({
26                     scrollLeft : parseInt(scrollLeft) + "px"
27                 }, 0);
28             }, false);
29 

　　　　　　　　　　//touchend  处理手势
30             document.getElementById("timelines").addEventListener("touchend", function(ev) {
31                 var x = ev.changedTouches[0].pageX;
32                 var y = ev.changedTouches[0].pageY;
33                 targetPoint = new Point(x, y);

　　　　　　　　　　　　//获得手势滑动角度
34                 var res = (Math.atan2(targetPoint.y - soucePoint.y, targetPoint.x - soucePoint.x)) / Math.PI * 180.0;
35                 touchEndTimestamp = new Date().getTime();
36                 $("#timelines").stop(true, false);

　　　　　　　　　　　　
37                 if(-45 < res && res < 45) {
38                     slideToRight(touchEndTimestamp - touchStartTimestamp);//向右滑
39                 } else if((135 < res && res < 180 ) || (-180 < res && res < -135)) {
40                     slideToLeft(touchEndTimestamp - touchStartTimestamp);//向左滑
41                 }
42 
43             }, false);

5. 完善手势滑动(因子:时间,距离)

    

 1   //评估timelines控件将要滚动的距离

　　　　function getMoveGap(time) {
 2             var timeGap = parseInt(time);
 3             if(timeGap <= 100) {
 4                 return 800;
 5             }
 6             if(timeGap <= 200) {
 7                 return 600;
 8             }
 9             if(timeGap > 200 && timeGap < 400) {
10                 return 200;
11             }
12             return 0;
13 
14         }
15 

　　　　　　//评估timelines滚动将要花费的时间
16         function getAnimateTime(time) {
17             var timeGap = parseInt(time);
18             if(timeGap <= 230) {
19                 return 500;
20             }
21             if(timeGap > 230 && timeGap < 400) {
22                 return 850;
23             }
24             return 0;
25 
26         }

6. 整合代码,实现滑动