javascript - 关于页面滚动插件fullpage的问题

问题描述

问 题

小米手环2的宣传页面：http://www.mi.com/shouhuan2/

在这个页面中，鼠标滚动到某个浏览器高度，会进入类似fullpage的全屏滚动插件中，开始全屏滚动。我用F12查看了一下，发现添加了mjfullpage的类名。但是在源文件中并没有找到关于mjfullpage的插件，网上也没有查到，是小米的前端自己封装的插件吗？请问去哪能找到这款插件呢。

解决方案

http://s01.mifile.cn/js/produ...
在sources里翻的

function(t, o) {
    ! function(t) {
        t.fn.wangfullpage = function(o) {
            function a() {
                t(".mjfullpage").each(function() {
                    var a = t(this),
                        i = a.find(o.boxItems),
                        n = a.offset().top,
                        e = t(window).scrollTop(),
                        s = t(window).height();
                    if(a.css({
                            height: t(window).height() * i.length
                        }), 0 === a.find(o.position).length) {
                        a.append('<div class="mjPosition"></div>'), i.each(function() {
                            var t = '<a class="mjPosition-items" href="javascript:;"><span></span></a>';
                            a.find(o.position).append(t)
                        });
                        var c = a.find(o.position).height();
                        a.find(o.position).css({
                            "margin-top": -(c + 20) / 2
                        })
                    }
                    var r = e >= n && e <= n + a.height() - s ? "fixed" : "absolute";
                    if(i.each(function(o) {
                            t(this).css({
                                height: s,
                                position: r,
                                width: "100%",
                                top: 0,
                                left: 0,
                                zIndex: Math.abs(o - i.length)
                            })
                        }), "absolute" === r) a.find(o.position).hide(), e > n && i.last().css({
                        top: "auto",
                        bottom: 0,
                        opacity: 1
                    });
                    else {
                        a.find(o.position).show();
                        var d = parseInt((e - n) / (s / 1.5)),
                            l = e >= n ? d : 0;
                        d >= i.length && (l = i.length - 1), i.removeClass("cur").eq(l).addClass("cur"), a.find(".mjPosition a").removeClass("cur").eq(l).addClass("cur")
                    }
                })
            }
            o = t.extend({
                box: ".mjfullpage",
                boxItems: ".mjfullpage-items",
                position: ".mjPosition"
            }, o), t(document).on("click", ".mjfullpage .mjPosition a", function() {
                if(t(this).hasClass("cur")) return !1;
                var o = t(this).index() + 1,
                    a = t(this).parents(".mjfullpage").offset().top;
                t("body, html").animate({
                    scrollTop: a + o * t(window).height() / 1.5
                })
            }), t(window).resize(a), t(window).scroll(a)
        }, t(".mjfullpage").wangfullpage()
    }

这篇关于javascript - 关于页面滚动插件fullpage的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！