Question

我的网站上有三个页面。 index.html，services.html和company.html。我需要的是，当用户单击“服务”链接时，页面将从左侧或右侧加载，而不是正常加载。我不太清楚，但是某些Jquery元素（例如data-transition="left"，data-transition="base"，data-name="services"）可能是可行的。是否有任何插件可以从左侧或右侧加载页面。我需要这个，请帮助我。

Answer 1

无法从左到右“加载”页面，但是您可以做的是：

在您的服务页面上
在页面内容周围创建一个“包装器div”，然后
将包装器div中的内容偏移到页面最右边，然后
在页面加载时使用jQuery / javascript（即，在$(document).ready()函数内部，将内容重新设置为正常位置。

所以，这样的东西（未经测试）：

<body>
    <div id="wrapper">
        <div id="inner-wrap">
            //page content goes here
            //Actually, I might create an inner div here and off-set/animate that one...
        </div>
    </div>
</body>

CSS:
#inner-wrap{position:relative;margin-left:100vw;}

jQuery:
$(document).ready(function(
    //use jQuery .animate() method to slide the marginLeft param back to 0.
){});

请注意，jQuery的动画方法不使用margin-left-而是使用marginLeft。这样。

示例：

Animating marginLeft with jQuery

更新：

您可以使用上面建议的相同想法，但是整个网站只需要一个文件（例如index.html），“页面”都只是DIV，您可以使用jQuery / javascript以“更改页面”。

例如：

<body>
    <div id="wrapper">
        <div id="page1" class="pagex">
            //page ONE content goes here
        </div><!-- .pagex -->
        <div id="page2" class="pagex">
            //page TWO content goes here
        </div><!-- .pagex -->
        <div id="page3" class="pagex">
            //page THREE content goes here
        </div><!-- .pagex -->
    </div>
</body>

CSS:
#wrapper{position:relative;}
.pagex{position:absolute;top:0;left:100vw;}

您需要了解的概念：

a）z-index-允许您将一个div放在另一个div上

b）position:absolute-从HTML流中删除div，并允许您将其放置在屏幕上的任何位置，甚至是其他div的上方

如何使用幻灯片加载HTML页面

1 个答案:

更新：