上個月使用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

總結

以上是生活随笔為你收集整理的html左滑效果图,前端福利——左滑右滑，绝对是你见过的最简单的写法 - 你猜猜看...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。