前端福利——左滑右滑，絕對是你見過的最簡單的寫法

標籤：

上個月使用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，我將奉獻我的架構，說到做到！

這對於寫移動端的使用者來說，絕對是極大的福利！

前端福利——左滑右滑，絕對是你見過的最簡單的寫法