朋友圈常见单页面触屏滑动上下翻屏功能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;
             100%;
            height: 100%;
            padding: 0px;
            margin: 0px;
            border: none;
        }

        #container {
             100%;
            height: 100%;
            overflow: hidden;
        }

        #wrapper {
             100%;
            height: 100%;
            overflow: visible;
        }

        .screen {
             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;
             100%;
        }

        .btn-up {
             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>

 

 

标