javascript开发系列---仿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中.

$.each(dateRate.data, function(i, item) {
                if(item.date == currentDate) {
                    currentDateIndex = i;
}

                $("<div   style='width:" + datePriceWidth + "px'><div>" + item.date + "</div><div>" + item.cheapest + "</div></div>").appendTo("#timelines");
            });

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

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

        //定义touchstart事件
            document.getElementById("timelines").addEventListener("touchstart", function(ev) {
                ev.preventDefault();//一定要阻止默认事件
                $("#timelines").stop(true, false);//停止之前的动画
                var x = ev.touches[0].pageX;//获得手指触摸点的X坐标
                var y = ev.touches[0].pageY;//获得手指触摸点的Y坐标
                soucePoint = new Point(x, y);
                lastPoint = soucePoint;
                touchStartTimestamp = new Date().getTime();//获得当前时间戳
            }, false);
            //定义touchmove事件
            document.getElementById("timelines").addEventListener("touchmove", function(ev) {
                ev.preventDefault();
                var x = ev.touches[0].pageX;
                var y = ev.touches[0].pageY;

                var scrollLeft = $("#timelines").scrollLeft();
                $("#timelines").stop(true, false);

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

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

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

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

　　　　　　　　　　　　
                if(-45 < res && res < 45) {
                    slideToRight(touchEndTimestamp - touchStartTimestamp);//向右滑
                } else if((135 < res && res < 180 ) || (-180 < res && res < -135)) {
                    slideToLeft(touchEndTimestamp - touchStartTimestamp);//向左滑
                }

            }, false);

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

    

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

　　　　function getMoveGap(time) {
            var timeGap = parseInt(time);
            if(timeGap <= 100) {
                return 800;
            }
            if(timeGap <= 200) {
                return 600;
            }
            if(timeGap > 200 && timeGap < 400) {
                return 200;
            }
            return 0;

        }
 

　　　　　　//评估timelines滚动将要花费的时间
        function getAnimateTime(time) {
            var timeGap = parseInt(time);
            if(timeGap <= 230) {
                return 500;
            }
            if(timeGap > 230 && timeGap < 400) {
                return 850;
            }
            return 0;

        }

6. 整合代码,实现滑动