Question

我的网站结构或多或少是这样的：首页 - 第1页 - 第2页 - 第3页。
我意识到的是一个网站之间的转换，比如页面之间的“移动应用程序”，点击按钮然后新页面滑入。
现在我正在研究如何使用AJAX（如果使用AJAX）加载页面并滑动它但我不知道AJAX）或使用插件（但我找不到任何东西）。
另一个选择是创建一个页面，然后进入该页面（很好找到一个插件来做），但页面很大，所以我的网站将变得沉重。
有谁有想法如何帮助我？谢谢你们！

ps：该网站仅适用于平板电脑和智能手机

Answer 1

有很多方法可以实现你想要的东西，下面我会告诉你其中一个。（答案底部的例子）

隐藏屏幕外的内容，并在页面加载时滑动：

<强> HTML：

<div class="content_div">
    <p class="title">HOME</p>
    <a href="" class="nav">page 1</a>
</div>

<强> CSS：

body{
    overflow:hidden;
}
.content_div {
    box-shadow:0 0 10px;
    border:10px solid black;
    height:800px;
    left:-1000px;
    width:100%;
    -webkit-animation:slide_in 800ms ease-out forwards;
    position:absolute;
    box-sizing:border-box;
}
.title{
    font-size:50px;
    text-align:center;
}
.nav{
    margin-left:20px;
}
@-webkit-keyframes slide_in{
    0% {
        left:-1000px;
    }
    100% {
        left:0px;
    }
}

现在，当您单击链接时，使用自定义处理程序拦截单击，阻止默认重定向，执行＆＃34;滑出＆＃34;动画，动画完成后，手动重定向：

对象上的所有动画完成后，.promise().done()内的函数将立即执行：

$(function(){
    $(".nav").on("click",function(ev){
        ev.preventDefault();        
        $(".content_div").animate({
            "margin-left":$(".content_div").width() +100
        }).promise().done(function(){
            window.location="http://jsfiddle.net/TheBanana/27o989vy/embedded/result/";
        });
    });
});

这是 Live Example

在您网站的每个页面上实现此功能，您应该有滑动过渡。如果您想要一个不同的动画，请更改过渡。

注意：在jsfiddle中会有点混乱，因为它会在自身内部打开，但在您的网站上它会根据需要运行。

更新AJAX：

如果您希望在窗口重新定位到新页面时避免页面消失，则需要动态加载新页面中的内容，而不是更改位置。

你可以使用普通的ajax，或者你可以使用jQuery的ajax扩展.load()，它在幕后做同样的ajax：

$(".nav_waitforajax").on("click", function (ev) {
    ev.preventDefault();
    $(".content_div").animate({
        "margin-left": $(".content_div").width() + 100
    }).promise().done(function () {
        $(".content_div").load("/three", function () {
            $(".content_div").animate({
                "margin-left": 0
            });
        });
    });
});

Ajax Example

更新2：动态内容的委派处理程序：

//monitors a `mouseover` event on every element inside `.content_div`
//which fits the selector of "*" (everything)
$(".content_div").on("mouseover","*",function(){
    $(this).css({
        "background":"red"
    });
});

Delegates Example

加载页面Ajax，然后将其滑入页面或插件

1 个答案: