Question

所以我启动并运行了我的网站，但我想在转到另一个页面或加载动画时添加一种移动动画，所以它确实看起来像是刷新页面。

我只知道HTML和一些CSS，除了计划学习JS和PHP之外别无其他。谢谢！

（我使用Bootstrap，其主题名为Paper，使其看起来像材料设计，来自bootswatch.com）

Answer 1

我想你是在询问动态页面加载。这是通过使用ajax实现的。有了这个你可以显示多个页面而无需刷新你也可以添加自己的动画来显示一些加载效果这些是使用此效果的链接..

http://www.reverbnation.com/

http://clicklinks.be/tutorials/javascript/prototype/page-loading/demo/index.html

Answer 2

首先，仅使用HTML和CSS很难实现这一点。你至少需要知道JS。您可以使用AJAX，通过调用第二页的内容并将其加载到当前页面中，或者如果您对AJAX不熟悉，可以使用javascript进行简单的黑客操作。您可以禁用指向第二页的链接，当单击第二页链接时，您可以设置第一页离开的动画。然后，在页面加载（第2页）上，您可以执行输入动画。如果你能提供一个jsfiddle，我们将更容易提供帮助。

Answer 3

我不会说这是一个广泛的问题，但我会说它需要一个js小提琴或代码的一些例子..

问题是网站是以101种方式构建的，所以即使有人为您提供代码..如果没有javascript的知识，您仍然很可能需要有人修改它以适应您的网站或者在途中遇到一些问题

至于javascript，让你的生活更轻松......从像jQuery这样的图书馆开始...这将为你节省时间和精力..

至于过程..好吧它可以变化...... 假设您有一个标准页面，它有一个DIV元素，除了页眉/菜单/页脚之外，它包含您的所有内容。

你要做的是......

向您的PHP Web服务器发送POST请求以获取所请求页面的副本（这只是内容..没有标题/菜单/页脚）
隐藏/淡出/移动当前具有当前页面内容的DIV元素
移动/更改后，您将使用HTML替换HTML 从POST收到
显示/淡出/移动DIV元素回到它开始的位置....

你做完了......听起来很简单，但各种各样......

function loadPage(sPage) {
    $(".site-heading > h1").html("Loading");
    $(".site-heading > span").html("Please wait while we fetch your page");

    $("#pageContents").fadeTo(200, 0.5);
    $(".intro-header").fadeTo(200, 0.5, function(){
        $.post("index.php", { ajax: "page", page:sPage }).done(function( data ) {
            var oJSON = $.parseJSON(data);
            if (typeof oJSON.success != 'undefined') {
                if (oJSON.success==true) {
                    $(".intro-header").css({"background-image":"url('images/" + sPage + "-bg.jpg')"});
                    $("#pageContents").html(oJSON.page);
                    $(".site-heading > h1").html(oJSON.header_text);
                    $(".site-heading > span").html(oJSON.header_subtext);
                    $(".intro-header").fadeTo(200, 1);
                    $("#pageContents").fadeTo(200, 1);
                }
            }
            //alert( "Data Loaded: " + data );
        });         
    });     
}

以上是一些来自上述代码的旧代码的JS函数。

if (isset($_REQUEST['ajax']) && $_REQUEST['ajax']=="page" && isset($_REQUEST['page'])) {
    $sPage = "engine/pages/" . $_REQUEST['page'] . "/index.php";
    $oRet = array();
    $oRet['success'] = false;
    $oRet['page'] = false;

    if (file_exists($sPage)) {
        $sPageSettings = "engine/pages/" . $_REQUEST['page'] . "/settings.php";
        if (file_exists($sPageSettings)) {
            require $sPageSettings;
        }

        $oRet['success'] = true;
        $oRet['page'] = file_get_contents($sPage);
        $oRet['header_text'] = $oPage['header_text'];
        $oRet['header_subtext'] = $oPage['header_subtext'];
    }
    echo json_encode($oRet);
    exit;
}

PHP代码是否响应请求并将HTML发送回javascript。

如何使用bootstrap转到另一个页面时创建移动动画？

3 个答案: