今天来说一个小技巧，相信现在有很多程序员会考虑到触屏开发，毕竟现在的触屏设备这么多。
首先，你需要一点js的知识，不需要很牛，因为我也是个js菜鸟。这段代码也从别的地方看来修改的，刚好符合需要。
话不多说，上个实例。
上面这个页面中的导航是可以左右滑动的。
布局的话相信对于css的人来说是不难的。
其实很简单，一个外容器，一个子容器，子容器里放导航，css相信看了布局就晓得是什么 情况了。
.warp{ width:100%; max-width: 480px; margin: 0 auto; height: 50px; background: #EEE; overflow: hidden; border-bottom: 1px solid #CCC; clear:both;} .inner{ line-height: 50px; width:630px; height: 50px; position: relative; overflow:hidden;} .inner a{ display: block;padding: 0 10px; float: left; font-size:18px;} 其中注意的是inner的定位position: relative;是相对定位。
有了以上的基础，就是需要写js部分了，先说下如何调用这个函数。
//横向滑动导航 var h1 = new horizontalMove({ innerId: "#inner", warpId : "#warp", speed: 0.5 }); 是不是非常简单，其中innerId，就是容器的di，warpId就是父容器的id，speed参数可以自己调试一下，注意speed是0到1的。
现在开始上源码了
/*================================ 调用方法horizontalMove({ innerId: innerId,//滑动元素id 如"#inner" warpId: warpId, //滑动元素外围容器id 如"#warp" speed:speed //滑动参数0-1 0滑动幅度越小，1滑动幅度越大 });================================*/ function horizontalMove(options){ //初始化数据 var speed = 0.5; var startX;//触摸时的X坐标 var x = 0;//X轴滑动的距离 var aboveX=0; // 设一个全局变量记录上一次内部块滑动的位置 options = options ||{} speed = options.speed; if(options.innerId&&options.warpId){ var documentWidth=$(options.innerId).width();//内部滑动模块的高度 var wapperWidth=$(options.warpId).width(); //外部框架的高度 var inner=$(options.innerId); var warp = $(options.warpId)[0] function touchStart(e){ //触摸开始 e.preventDefault(); var touch=e.touches[0]; startX = touch.pageX; //刚触摸时的坐标 } function touchMove(e){ //滑动 e.preventDefault(); var touch = e.touches[0]; x = touch.pageX - startX;//滑动的距离 inner.css({left:aboveX+x*speed}); } function touchEnd(e){ //手指离开屏幕 aboveX=parseInt(inner.css("left"));//touch结束后记录内部滑块滑动的位置 在全局变量中体现 一定要用parseInt()将其转化为整数字; if(x>0&&aboveX>0){ //当滑动到最顶端时候不能再网上滑动 //inner.style.top=0; inner.animate({left:0},200); aboveX=0; } if(x<0&&(aboveX<(-(documentWidth-wapperWidth)))){ //当滑动到最底部时候不能再网下滑动 // inner.style.top=-(documentHeight-wapperHeight)+"px"; inner.animate({left:-(documentWidth-wapperWidth)},200); aboveX=-(documentWidth-wapperWidth); } }// warp.addEventListener('touchstart', touchStart,false); warp.addEventListener('touchmove', touchMove,false); warp.addEventListener('touchend', touchEnd,false); } } 代码注释相信是很清楚的，其实就是touch事件的应用。如果你是js大牛，非常希望能跟跟你们学习。