Question

我正在尝试重新创建此网站显示的效果：http://mmenu.frebsite.nl/examples/panorama/index.html

它可以向左/向右滑动页面但是当我单击它时它不能执行所需的功能吗？

谁能看到我出错的地方？

HTML：

<!DOCTYPE html>
<html class=""><head>
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    <meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes">

    <title>Test</title>

    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Exo:100,400,900">
    <link type="text/css" rel="stylesheet" href="css/jquery.mmenu.all.css">
    <link type="text/css" rel="stylesheet" href="css/layout.css">

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><style type="text/css"></style>
    <script type="text/javascript" src="js/jquery.mmenu.min.all.js"></script>
    <script type="text/javascript">
        $(function() {
            var options = {
                classes         : 'mm-fullscreen',
                zposition       : 'next',
                moveBackground  : false
            };
            $('#page-left').mmenu( options );

            options.position = 'right',
            $('#page-right').mmenu( options );

            $('#page-left, #page-right')
                .on(
                    'opening.mm',
                    function()
                    {
                        $('body').addClass( this.id );
                    }
                ).on(
                    'closing.mm',
                    function()
                    {
                        $('body').removeClass( this.id );
                    }
                );
        });
    </script>
</head>
<body style="" class=""><div id="page-right" class="mm-menu mm-horizontal mm-fullscreen mm-ismenu mm-right mm-next"><div class="mm-panel mm-opened mm-current" id="mm-m1-p0">
                <div class="header">
                    <a href="#page">back</a>
                    <span>Right Page</span>
                </div>
                <div class="panel">
                </div>
            </div></div><div id="page-left" class="mm-menu mm-horizontal mm-fullscreen mm-ismenu mm-next"><div class="mm-panel mm-opened mm-current" id="mm-m0-p0">
                <div class="header">
                    <span>Left Page</span>
                    <a href="#page">back</a>
                </div>
                <div class="panel">
                </div>
            </div></div>
    <div id="page" class="mm-page" style="">
        <div class="header">
            Test
        </div>
        <div class="panel">
            <div>
                <p><strong><big>Test</big></strong>Hello World!</p>
                <div id="links">
                    <a href="#page-left">Left</a>
                    <a href="#page-right">Right</a>
                </div>
            </div>
        </div>



    </div>

<div id="mm-blocker"></div><div id="window-resizer-tooltip" style="display: none;"><a href="#" title="Edit settings" style="background-image: url(chrome-extension://kkelicaakdanhinjdeammmilcgefonfh/images/icon_19.png);"></a><span class="tooltipTitle">Window size: </span><span class="tooltipWidth" id="winWidth">1360</span> x <span class="tooltipHeight" id="winHeight">728</span><br><span class="tooltipTitle">Viewport size: </span><span class="tooltipWidth" id="vpWidth">1360</span> x <span class="tooltipHeight" id="vpHeight">643</span></div></body></html>

JS：

使用http://mmenu.frebsite.nl/index.php

中的jquery.mmenu.min.all.js

我的测试网站的'托管'版本：https://dl.dropboxusercontent.com/u/24713212/Clients%20Live%20Version/0002_GlenSymes/index.html

Jquery滑动页面效果娱乐无法正常工作

0 个答案: