效果图:
随着手指在移动设备上滑动,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. 整合代码,实现滑动