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程序设计有所帮助。