朋友圈常見單頁面觸屏滑動上下翻屏功能jQuery實現

翻頁插件；實現原理，用margin-top來控制頁面容器位置來實現上下翻頁。margin這屬性很好用，可以用來制作側欄動畫滑出菜單（左菜單，右內容，控制兩者的margin實現）；或者head下滑菜單

（上菜單，下內容，控制兩者的margin實現）。

JS代碼(jquery.showup.js)：

/** * @Creator: Nelson Kuang/Fast Mover * @showup 翻頁插件；實現原理，用margin-top來控制頁面容器位置來實現上下翻頁 * @License:The MIT License (MIT) * @調用方式 $("#container").showup({ startPage: 0,//開始頁面 duration:1000//動畫持續時間 }) * @Creator: Nelson Kuang/Fast Mover * @wipe 觸屏滑動綁定觸發事件 * @License:The MIT License (MIT) * @調用方式 $("#node").wipe({ upEvent: function(){},//划上事件 downEvent: function(){}，//划下事件 rightEvent:function(){},//划右事件 leftEvent:function(){},//划左事件 delay: 500　//事件延時多久執行 }); */ $.fn.extend({ wipe: function (options) { var defaults = {//wipe的默認參數配置
        leftEvent: '', rightEvent: '', upEvent: '', downEvent: '', delay: 500 }; var options = $.extend({}, defaults, options);//傳入參數與默認參數合並
    var line = {//定義滑動線的起點與終點
        startX: 0, startY: 0, endX: 0, endY: 0 }, results = {//定義滑動，左，右，上，下，或者任意
        up: false, down: false, left: false, right: false, any: function () { return results.up || results.down || results.left || results.right; } }, useMouseEvents = false,//鼠標滑動模式
    timer,//綁定的事件延時執行的計時器
    startTime = false,//滑動開始時間
    endTime = false,//滑動結束時間
    _this = $(this); function onTouchStart(e) { e.preventDefault();//可選項，阻止事件冒泡
        startTime = new Date().getTime(); //起點賦值
        line.startX = useMouseEvents ? e.pageX : e.originalEvent.touches[0].pageX;//起點賦值
        line.startY = useMouseEvents ? e.pageY : e.originalEvent.touches[0].pageY; _this.on("mousemove", onTouchMove);//綁定鼠標按下並滑動事件並監聽滑動位置
        _this.one("mouseup", onTouchEnd);//綁定一次鼠標放開的事件，也即結束滑動事件
        _this.on("touchmove", onTouchMove);//綁定移動設備的觸屏滑動事件並監聽滑動位置
 } function onTouchMove(e) {//綁定鼠標或者移動設備的滑動事件並監聽滑動位置
        line.endX = useMouseEvents ? e.pageX : e.originalEvent.touches[0].pageX; line.endY = useMouseEvents ? e.pageY : e.originalEvent.touches[0].pageY; } function onTouchEnd(e) {//滑動結束事件
        e.preventDefault();//可選項，阻止事件冒泡
        _this.off("mousemove", onTouchMove);//解除鼠標滑動事件綁定
        _this.off("touchmove", onTouchMove);//解除移動設備的觸屏滑動事件綁定
        endTime = new Date().getTime(); //特殊情況當點擊處理並觸發點擊事件，退出；1,時間太短小於100ms；2滑動距離小於15；3,點擊
        if (endTime - startTime < 100 || (Math.abs(line.endX - line.startX) < 15 && Math.abs(line.endY - line.startY) < 15) || (line.endX == 0 && line.endY == 0)) { resetTouch();//重設參數
            _this.trigger("click"); return; } if (line.endX > line.startX) {//向右滑動
            results.left = false; results.right = true; } else if (line.endX > line.startX) {//向左滑動
            results.left = true; results.right = false; } if (line.endY < line.startY) {//向上滑動
            results.down = false; results.up = true; } else if (line.endY > line.startY) {//向下滑動
            results.down = true; results.up = false; } clearTimeout(timer); timer = setTimeout(function () {//根據滑動方向及相應的傳入的函數執行相應的事件
            if (results.left && typeof (options.leftEvent) == 'function') options.leftEvent(); if (results.right && typeof (options.rightEvent) == 'function') options.rightEvent(); if (results.up && typeof (options.upEvent) == 'function') options.upEvent(); if (results.down && typeof (options.downEvent) == 'function') options.downEvent(); resetTouch(); }, options.delay); } function resetTouch() {//重設參數
        line.startX = line.startY = line.endX = line.endY = 0; results.left = results.down = results.up = results.right = false; } //函數入口處
    if ("ontouchstart" in document.documentElement) {//移動設備入口
        _this.on("touchstart", onTouchStart); _this.on("touchend", onTouchEnd); } else {//電腦鼠標操作
        useMouseEvents = true; _this.on("mousedown", onTouchStart); _this.on("mouseout", onTouchEnd); } }, showup: function (options) { var defaults = {//showup的默認參數配置
        startPage: 0,//開始打開的頁碼數
        duration: 1000//動畫持續時間
 }; var options = $.extend({}, defaults, options);//傳入參數與默認參數合並

    this.each(function () { var _this = $(this); var pageWidth = _this.width(),//頁面寬度
            pageHeight = _this.height(),//頁面高度
            pageNumber = _this.children().children().length;//頁面數
        if (pageNumber < 2) { return; }//如果是0或者1頁，直接退出
        if (options.startPage > pageNumber - 1) { options.startPage = 0; }//如果傳入參數超過頁面總數則從0開始
        var totalHeight = pageHeight * pageNumber;//所有頁面加起來總高度
        var endPage = pageNumber - 1,//結束頁面
            firstPage = 0,//第一頁頁碼為0
            lastPage = pageNumber - 1,//最后一頁頁碼
            currentPage = options.startPage;//把開始頁設為當前頁
        var _wrapper = _this.children();//獲取容器
        if (currentPage > 0)//初始化時打開當前頁
 gotoPage(currentPage); _this.children().children().each(function (n) { var _page = $(this); if (n == options.startPage) { //頁碼為開始頁時，只需綁定向上翻頁事件（控制margin-top使整個wrapper向上移動）
 _page.wipe({ upEvent: pageUp }); } else if (n == lastPage) { //頁碼為最后一頁時，只需綁定向下翻頁事件（控制margin-top使整個wrapper向下移動）
 _page.wipe({ downEvent: pageDown }); } else { //其他情況，綁定向上和向下翻頁事件
 _page.wipe({ upEvent: pageUp, downEvent: pageDown }); } }); function gotoPage(n) {//打開第n頁
            var margin_top = -(n * pageHeight); _wrapper.css("marginTop", margin_top + "px"); currentPage = n; } function pageDown() {//向下翻頁
            var margin_top = -(currentPage * pageHeight); _wrapper.stop(true, true).animate({ marginTop: (margin_top + pageHeight) + "px" }, { duration: options.duration }); currentPage--; } function pageUp() {//向上翻頁
            var margin_top = -(currentPage * pageHeight); _wrapper.stop(true, true).animate({ marginTop: (margin_top - pageHeight) + "px" }, { duration: options.duration }); currentPage++; } }); } });

Html代碼(demo.html)：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <title></title>
    <style> body, html { background-color: black; width: 100%; height: 100%; padding: 0px; margin: 0px; border: none;
        } #container { width: 100%; height: 100%; overflow: hidden;
        } #wrapper { width: 100%; height: 100%; overflow: visible;
        } .screen { width: 100%; height: 100%;
        } .first-screen { background-color: purple;
        } .second-screen { background-color: silver;
        } .third-screen { background-color: gray;
        } .fourth-screen { background-color: green;
        } .fifth-screen { background-color: yellow;
        } .sixth-screen { background-color: orange;
        } .seventh-screen { background-color: brown;
        } #btn-wrapper { position: fixed; left: 0px; bottom: 30px; width: 100%;
        } .btn-up { width: 20px; height: 80px; margin: 0px auto; background-color: white;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="wrapper">
            <div class="screen first-screen">
            </div>
            <!--Second session--->
            <div class="screen second-screen">
            </div>
            <!--Third session--->
            <div class="screen third-screen">
            </div>
            <!--Fourth session--->
            <div class="screen fourth-screen">
            </div>
            <!--Fifth session--->
            <div class="screen fifth-screen">
            </div>
            <!--Sixth session--->
            <div class="screen sixth-screen">
            </div>
            <!--Seventh session--->
            <div class="screen seventh-screen">
            </div>
        </div>
    </div>
    <div id="btn-wrapper">
        <div class="btn-up"></div>
    </div>
    <script src="jquery.js"></script>
    <script src="jquery.showup.js"></script>
    <script> $(document).ready(function () { $("#container").showup({ startPage: 2, duration: 500 }); }); </script>
</body>
</html>