JS+HTML5手机开发之滚动和惯性缓动实现方法分析
本文实例讲述了JS+HTML5手机开发之滚动和惯性缓动实现方法。分享给大家供大家参考，具体如下：
1.滚动以下是三种实现方式：
1)利用原生的css属性overflow:scrolldivid=parentstyle=overflow:scroll;divid='content'内容区域/div/divNotice:在android有bug,滚动完后会回退到最顶端的内容区域，解决办法是使用后两种方式实现
2)js编程实现思路：对比手指在屏幕上移动前后位置变化改变内容元素content
1.滚动
以下是三种实现方式：
1)利用原生的css属性overflow:scroll
<divid="parent"style="overflow:scroll;> <divid='content'>内容区域</div> </div>
Notice:
在android有bug,滚动完后会回退到最顶端的内容区域，解决办法是使用后两种方式实现
2)js编程实现
思路：对比手指在屏幕上移动前后位置变化改变内容元素content的位置
第一步：设置parent的overflow为hidden,设置content的position为relative,top为0;
第二步：监听touch事件
varparent=document.getElementById('parent');
parent.addEventListener('touchstart',function(e){
//dotouchstart
});
parent.addEventListener('touchmove',function(e){
//dotouchmove
});
parent.addEventListener('touchend',function(e){
//dotouchend
});
第三步：实现滚动代码
/**
*这里只实现垂直滚动
*/
varparent=document.getElementById('parent');
varcontent=document.getElementById('content')
varstartY=0;//初始位置
varlastY=0;//上一次位置
parent.addEventListener('touchstart',function(e){
lastY=startY=e.touches[0].pageY;
});
parent.addEventListener('touchmove',function(e){
varnowY=e.touches[0].pageY;
varmoveY=nowY-lastY;
varcontentTop=content.style.top.replace('px','');
//设置top值移动content
content.style.top=(parseInt(contentTop)+moveY)+'px';
lastY=nowY;
});
parent.addEventListener('touchend',function(e){
//dotouchend
varnowY=e.touches[0].pageY;
varmoveY=nowY-lastY;
varcontentTop=content.style.top.replace('px','');
//设置top值移动content
content.style.top=(parseInt(contentTop)+moveY)+'px';
lastY=nowY;
});
第四步：优化
上边代码在手机上运行效果相对PC上要卡很多
优化部分请参见:
3)使用iScroll4框架
varscroll=newiScroll('parent',{
hScrollbar:false,
vScrollbar:true,
checkDOMChanges:true
});
框架官网：http://cubiq.org/iscroll-4
2.惯性缓动
思路：取手指最后一段时间在屏幕上划动的平均速度v，让v按一个递减函数变化，直到不能移动或v<=0
/**
*这里只实现垂直滚动
*/
varparent=document.getElementById('parent');
varcontent=document.getElementById('content')
varstartY=0;//初始位置
varlastY=0;//上一次位置
/**
*用于缓动的变量
*/
varlastMoveTime=0;
varlastMoveStart=0;
varstopInertiaMove=false;//是否停止缓动
parent.addEventListener('touchstart',function(e){
lastY=startY=e.touches[0].pageY;
/**
*缓动代码
*/
lastMoveStart=lastY;
lastMoveTime=e.timeStamp||Date.now();
stopInertiaMove=true;
});
parent.addEventListener('touchmove',function(e){
varnowY=e.touches[0].pageY;
varmoveY=nowY-lastY;
varcontentTop=content.style.top.replace('px','');
//设置top值移动content
content.style.top=(parseInt(contentTop)+moveY)+'px';
lastY=nowY;
/**
*缓动代码
*/
varnowTime=e.timeStamp||Date.now();
stopInertiaMove=true;
if(nowTime-lastMoveTime>300){
lastMoveTime=nowTime;
lastMoveStart=nowY;
}
});
parent.addEventListener('touchend',function(e){
//dotouchend
varnowY=e.touches[0].pageY;
varmoveY=nowY-lastY;
varcontentTop=content.style.top.replace('px','');
varcontentY=(parseInt(contentTop)+moveY);
//设置top值移动content
content.style.top=contentY+'px';
lastY=nowY;
/**
*缓动代码
*/
varnowTime=e.timeStamp||Date.now();
varv=(nowY-lastMoveStart)/(nowTime-lastMoveTime);//最后一段时间手指划动速度
stopInertiaMove=false;
(function(v,startTime,contentY){
vardir=v>0?-1:1;//加速度方向
vardeceleration=dir*0.0006;
varduration=v/deceleration;//速度消减至0所需时间
vardist=v*duration/2;//最终移动多少
functioninertiaMove(){
if(stopInertiaMove)return;
varnowTime=e.timeStamp||Date.now();
vart=nowTime-startTime;
varnowV=v+t*deceleration;
//速度方向变化表示速度达到0了
if(dir*nowV<0){
return;
}
varmoveY=(v+nowV)/2*t;
content.style.top=(contentY+moveY)+"px";
setTimeout(inertiaMove,10);
}
inertiaMove();
})(v,nowTime,contentY);
});
PS：这里再为大家推荐几款代码格式化、美化工具，相信大家在以后的开发过程中会用得到：
在线JavaScript代码美化、格式化工具：
http://tools.jb51.net/code/js
JavaScript压缩/格式化/加密工具：
http://tools.jb51.net/code/jscompress
json代码在线格式化/美化/压缩/编辑/转换工具：
http://tools.jb51.net/code/jsoncodeformat
在线JSON代码检验、检验、美化、格式化工具：
http://tools.jb51.net/code/json
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。