上个月使用bootstrap和seajs搭建了前端通用框架，就是为了使代码分块话，js和css直接通过配置就可调用，这样既方便了以后的开发，又方便了效率！
先看下框架图形吧
example就是手机端经常用到的示例
今天就是把我写的左滑右滑分享给大家，先看下图例吧
index.html代码
引用三个js
jquery.js
swiperhand.js
index.js
<div id="pagenos">
<span class="myspan" id="myspan0" onclick="show(0)">信息列表</span>
<span class="myspan" id="myspan1" onclick="show(1)"> 我的信息</span>
</div>
<div id="youbiao"> </div>
<div id="box">
<div id="content">
<div class="blk ">
信息列表内容
</div>
<div class="blk">
我的信息内容
</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
<div id="pagenos">
<!--在这里直接添加一个span-->
<span class="myspan" id="myspan2" onclick="show(2)"> test</span>
</div>
<div id="box">
<div id="content">
<!--在这里直接添加一个blk-->
<div class="blk" > test</div>
</div>
</div>
如下图所示：
写个文档不容易啊，领导让把这个框架改到极致，让新手拿过来就用，哎。。。。前端开发真辛苦，如果，点赞超过100，我将奉献我的框架，说到做到！
这对于写移动端的用户来说，绝对是极大的福利！
时间： 2024-10-10 13:50:05