上个月使用bootstrap和seajs搭建了前端通用框架，就是为了使代码分块话，js和css直接通过配置就可调用，这样既方便了以后的开发，又方便了效率！

先看下框架图形吧

example就是手机端经常用到的示例

今天就是把我写的左滑右滑分享给大家，先看下图例吧

index.html代码

引用三个js 

jquery.js

swiperhand.js

index.js

<div> <span>信息列表</span> <span> 我的信息</span> </div> <div> </div> <div> <div> <div> 信息列表内容 </div> <div> 我的信息内容 </div> </div> </div>

　　css 代码

#pagenos { position: fixed; top: 0px; left: 0px; text-align: center; font-family: '微软雅黑'; width: 100%; z-index: 2; background: #e7f8ff; color:#686767; } #content { left: 0; -moz-transition-property: left; -o-transition-property: left; -webkit-transition-property: left; transition-property: left; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-duration: 0.3s; overflow: hidden; position: absolute; } .blk { float: left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; overflow: auto; } #box { position: relative; overflow: hidden; width: 100%; padding-top:40px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #youbiao { -moz-transition-property: left; -o-transition-property: left; transition-property: left; -webkit-transition-property: left; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-duration: 0.3s; position: fixed; top:38px; height:2px; left:0; background: #008000; z-index: 3; box-sizing: border-box; } .myspan{ padding: 10px 0; display: inline-block; text-align: center; font-size: 14px; }

　　swiperhand.js 代码

//左右滑动开始 var handlstart = function () { tag = ''; var e = arguments.callee.arguments[0] || window.event; x = e.touches[0].pageX; y = e.touches[0].pageY; col = -curP * dqwidth; } addEvent(document, 'touchstart', handlstart); var handl = function () { var e = arguments.callee.arguments[0] || window.event; xc = e.touches[0].pageX; yc = e.touches[0].pageY; if (tag == '') { if (Math.abs(x - xc) > Math.abs(y - yc)) { tag = 1; $('#content').css("webkitTransitionDuration", "0s"); $('#content').css("transitionDuration", "0s"); $('#youbiao').css("webkitTransitionDuration", "0s"); $('#youbiao').css("transitionDuration", "0s"); } else { tag = 2; } } if (tag == 1) { $('#content').css("left", (col - x + xc) + 'px'); $('#youbiao').css("left", -(col - x + xc) / tabnum + 'px'); e.stopPropagation(); e.preventDefault(); } }; addEvent(document, 'touchmove', handl); var handlend = function () { if (tag == 1) { $('#content').css("webkitTransitionDuration", "0.5s"); $('#content').css("transitionDuration", "0.5s"); $('#youbiao').css("webkitTransitionDuration", "0.5s"); $('#youbiao').css("transitionDuration", "0.5s"); if (Math.abs(x - xc) > 30) { if (x - xc > 0) { if (col - dqwidth < -(tabnum - 1) * dqwidth) { var re = -curP * dqwidth; } else { var re = col - dqwidth; curP++; } } else if (x - xc < 0) { if (col + dqwidth > 0) { var re = 0; } else { var re = col + dqwidth; curP--; } } for (var i = 0; i < tabnum; i++) { $("#myspan" + i).css("color", defaultcolor); } $("#myspan" + curP).css("color", setcolor); document.getElementById("content").style.left = re + 'px'; $('#youbiao').css("left", -re / tabnum); } else { document.getElementById("content").style.left = col + 'px'; } } tag = ''; } addEvent(document, 'touchend', handlend); function addEvent(obj, type, fn) { if (obj.attachEvent) { obj['e' + type + fn] = fn; obj[type + fn] = function () { obj['e' + type + fn](window.event); } obj.attachEvent('on' + type, obj[type + fn]); } else { obj.addEventListener(type, fn, false); } }

　　index.js 源码

var tabnum = 2;//设置默认标签页 var curP = 0; //当前所属的标签页 var dqwidth = document.documentElement.clientWidth;//屏幕的当前宽度 var dqheight = document.documentElement.clientHeight;//屏幕的当前高度 var defaultcolor = "#686767";//设置字体默认的颜色 var setcolor = "#fdad03";//设置字体当前的颜色 $(function () { Init(); }) //初始化加载 function Init() { tabnum = $(".myspan").length; //设置游标的宽度 $("#youbiao").css("width", parseInt(100 / parseInt(tabnum)) + "%"); $(".myspan").css("width", parseInt(100 / parseInt(tabnum)) - 1.5 + "%") $("#myspan0").css("color", setcolor); $('#content').width(dqwidth * tabnum); $('.blk').width(dqwidth); $('#box').css("height", dqheight + "px"); $('.blk').height(dqheight - $('#pagenos').height()); } //点击菜单项加载 function show(n) { curP = n; document.getElementById("content").style.left = -curP * dqwidth + 'px'; $('#youbiao').css({ "left": curP * dqwidth / tabnum }); for (var i = 0; i < tabnum; i++) { $("#myspan" + i).css("color", defaultcolor); } $("#myspan" + n).css("color", setcolor); }

如果，想加菜单项，直接修改html就可以了，其他的js都不需要变动，比如，我现在想增加一个 test