Html 全屏切换效果

 来源 http://www.imooc.com/learn/374

 

pageswitch.js

(function ($) {
    var defaults = {
        'container': '#container', //容器
        'sections': '.section', //子容器
        'easing': 'ease', //特效方式，ease-in,ease-out,linear
        'duration': 1000, //每次动画执行的时间
        'pagination': true, //是否显示分页
        'loop': true, //是否循环
        'keyboard': true, //是否支持键盘
        'direction': 'vertical', //滑动的方向 horizontal,vertical,
        'onpageSwitch': function (pagenum) { }
    };

    var win = $(window),
		container, sections;

    var opts = {},
		canScroll = true;

    var iIndex = 0;

    var arrElement = [];

    var SP = $.fn.switchPage = function (options) {
        opts = $.extend({}, defaults, options || {});

        container = $(opts.container),
		sections = container.find(opts.sections);

        sections.each(function () {
            arrElement.push($(this));
        });

        return this.each(function () {
            if (opts.direction == "horizontal") {
                initLayout();
            }

            if (opts.pagination) {
                initPagination();
            }

            if (opts.keyboard) {
                keyDown();
            }
        });
    }

    //滚轮向上滑动事件
    SP.moveSectionUp = function () {
        if (iIndex) {
            iIndex--;
        } else if (opts.loop) {
            iIndex = arrElement.length - 1;
        }
        scrollPage(arrElement[iIndex]);
    };

    //滚轮向下滑动事件
    SP.moveSectionDown = function () {
        if (iIndex < (arrElement.length - 1)) {
            iIndex++;
        } else if (opts.loop) {
            iIndex = 0;
        }
        scrollPage(arrElement[iIndex]);
    };

    //私有方法
    //页面滚动事件
    function scrollPage(element) {
        var dest = element.position();
        if (typeof dest === 'undefined') { return; }
        initEffects(dest, element);
    }

    //重写鼠标滑动事件
    $(document).on("mousewheel DOMMouseScroll", MouseWheelHandler);
    function MouseWheelHandler(e) {
        e.preventDefault();
        var value = e.originalEvent.wheelDelta || -e.originalEvent.detail;
        var delta = Math.max(-1, Math.min(1, value));
        if (canScroll) {
            if (delta < 0) {
                SP.moveSectionDown();
            } else {
                SP.moveSectionUp();
            }
        }
        return false;
    }

    //横向布局初始化
    function initLayout() {
        var length = sections.length,
			width = (length * 100) + "%",
			cellWidth = (100 / length).toFixed(2) + "%";
        container.width(width).addClass("left");
        sections.width(cellWidth).addClass("left");
    }

    //初始化分页
    function initPagination() {
        var length = sections.length;
        if (length) {

        }
        var pageHtml = '<ul id="pages"><li class="active"></li>';
        for (var i = 1; i < length; i++) {
            pageHtml += '<li></li>';
        }
        pageHtml += '</ul>';
        $("body").append(pageHtml);
    }

    //分页事件
    function paginationHandler() {
        var pages = $("#pages li");
        pages.eq(iIndex).addClass("active").siblings().removeClass("active");
    }

    //是否支持css的某个属性
    function isSuportCss(property) {
        var body = $("body")[0];
        for (var i = 0; i < property.length; i++) {
            if (property[i] in body.style) {
                return true;
            }
        }
        return false;
    }

    //渲染效果
    function initEffects(dest, element) {
        var transform = ["-webkit-transform", "-ms-transform", "-moz-transform", "transform"],
			transition = ["-webkit-transition", "-ms-transition", "-moz-transition", "transition"];

        canScroll = false;
        if (isSuportCss(transform) && isSuportCss(transition)) {
            var traslate = "";
            if (opts.direction == "horizontal") {
                traslate = "-" + dest.left + "px, 0px, 0px";
            } else {
                traslate = "0px, -" + dest.top + "px, 0px";
            }
            container.css({
                "transition": "all " + opts.duration + "ms " + opts.easing,
                "transform": "translate3d(" + traslate + ")"
            });
            container.on("webkitTransitionEnd msTransitionend mozTransitionend transitionend", function () {
                canScroll = true;
            });
        } else {
            var cssObj = (opts.direction == "horizontal") ? { left: -dest.left} : { top: -dest.top };
            container.animate(cssObj, opts.duration, function () {
                canScroll = true;
            });
        }
        element.addClass("active").siblings().removeClass("active");
        if (opts.pagination) {
            paginationHandler();
        }
    }

    //窗口Resize
    var resizeId;
    win.resize(function () {
        clearTimeout(resizeId);
        resizeId = setTimeout(function () {
            reBuild();
        }, 500);
    });

    function reBuild() {
        var currentHeight = win.height(),
			currentWidth = win.width();

        var element = arrElement[iIndex];
        if (opts.direction == "horizontal") {
            var offsetLeft = element.offset().left;
            if (Math.abs(offsetLeft) > currentWidth / 2 && iIndex < (arrElement.length - 1)) {
                iIndex++;
            }
        } else {
            var offsetTop = element.offset().top;
            if (Math.abs(offsetTop) > currentHeight / 2 && iIndex < (arrElement.length - 1)) {
                iIndex++;
            }
        }
        if (iIndex) {
            paginationHandler();
            var cuerrentElement = arrElement[iIndex],
				dest = cuerrentElement.position();
            initEffects(dest, cuerrentElement);
        }
    }

    //绑定键盘事件
    function keyDown() {
        var keydownId;
        win.keydown(function (e) {
            clearTimeout(keydownId);
            keydownId = setTimeout(function () {
                var keyCode = e.keyCode;
                if (keyCode == 37 || keyCode == 38) {
                    SP.moveSectionUp();
                } else if (keyCode == 39 || keyCode == 40) {
                    SP.moveSectionDown();
                }
            }, 150);
        });
    }
})(jQuery);

　　demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面切换</title>
    <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="pageswitch.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#container").switchPage({


            });
        });
    </script>
    <style type="text/css">
        h1, body, html
        {
            padding: 0;
            margin: 0;
        }
        body
        {
            font-family: Arial, "Microsoft YaHei" , "Hiragino Sans GB" ,sans-serif;
        }
        html, body
        {
            height: 100%;
            overflow: hidden;
        }
        
        #container, .section
        {
            height: 100%;
            position: relative;
        }
        div.section
        {
            background-color: #000;
            background-size: cover;
            background-position: 50% 50%;
        }
        #section0
        {
            background-image: url(images/1.jpg);
        }
        #section1
        {
            background-image: url(images/2.jpg);
        }
        #section2
        {
            background-image: url(images/3.jpg);
        }
        #section3
        {
            background-image: url(images/7.jpg);
        }
        #section4
        {
            background-image: url(images/5.jpg);
        }
        #section5
        {
            background-image: url(images/6.jpg);
        }
        #section6
        {
            background-image: url(images/4.jpg);
        }
        
        .left
        {
            float: left;
        }
        
        #pages
        {
            position: fixed;
            right: 10px;
            top: 50%;
            list-style: none;
        }
        #pages li
        {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #fff;
            margin: 0 0 10px 5px;
        }
        #pages li.active
        {
            width: 14px;
            height: 14px;
            border: 2px solid #FFFE00;
            background: none;
            margin-left: 0;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="section active" id="section0">
        </div>
        <div class="section" id="section1">
        </div>
        <div class="section" id="section2">
        </div>
        <div class="section" id="section3">
        </div>
        <div class="section" id="section4">
        </div>
        <div class="section" id="section5">
        </div>
        <div class="section" id="section6">
        </div>
    </div>
</body>
</html>