html左滑效果图,前端福利——左滑右滑，绝对是你见过的最简单的写法 - 你猜猜看...

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

先看下框架图形吧

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

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

index.html代码

引用三个js

jquery.js

swiperhand.js

index.js

信息列表

我的信息

信息列表内容

我的信息内容

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