Question

我有一个网站，我在加载页面时为背景设置动画。我的每个页面都有这样的结构：

<?php require 'Top.php'; ?>
<!--Page content-->
<?php require 'Bottom.php'; ?>

Top.php看起来像这样：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script src="js/animate.js"></script>

<title>Untitled Document</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="content">
    <div id="net">
        <div id="net-image"></div>
        <div id="lines"></div>
        <div id="logo"><h1>AVBELJ</h1><h2>PEČARSTVO</h2></div>
        <div class="square" id="st1"></div>
        <div class="square" id="st2"></div>
        <div class="square" id="st3"></div>
        <div class="square" id="st4"></div>
        <div class="square" id="st5"></div>
        <div class="square" id="st6"></div>
        <div class="square" id="st7"></div>
        <div class="square" id="st8"></div>
        <div class="square" id="st9"></div>
        <div class="square" id="st10"></div>
        <div class="square" id="st11"></div>
        <div class="square" id="st12"></div>
        <div class="square" id="st13"></div>


        <!--<img draggable="true" id="snowman" src="images/temenKvadrat.png" alt="snowman" style="position: absolute; left: 50px; top: 120px; z-index: 200;">-->


        <nav id="menu">
            <ul id="mainlevel">
                <li><a href="about.php"><img src="images/about.png" border="0" alt="O NAS"></a></li>
                <li><a href="items.php"><img src="images/items.png" border="0" alt="IZDELKI"></a></li>
                <li><a href="gallery.php"><img src="images/gallery.png" border="0" alt="GALERIJA"></a></li>
                <li><a href="references.php"><img src="images/references.png" border="0" alt="REFERENCE"></a></li>
                <li><a href="contact.php"><img src="images/contact.png" border="0" alt="KONTAKT"></a></li>
            </ul>
        </nav>

和animate.js以window.load开头：

$(window).load(function() {
    $("#lines").slideDown(2500);
    $('#net-image').delay(2000).fadeIn(1000);
    $("#logo").delay(3000).animate({left: "0px"}, 2000);
    $(".square").delay(3000).show("scale",{}, 1000);
})

我的问题是，只有在我第一次加载页面时才能使动画发生。现在每次单击一个新菜单项时它都会动画。如何更改它，以便在单击菜单项时，动画不会发生。

非常感谢你的帮助！

Answer 1

如果您只希望动画发生在您的顶级网页上，而不是您网站上的其他网页上，那么您有以下选项：

仅在顶级页面上包含动画代码。
让代码检查是否在顶级页面上（它可以检查window.location.pathname）并且仅在当前URL是您的域的顶级（例如主页而不是页面）时启动动画您的菜单指向）。

如果您只想在用户第一次到达您的网站时（在任何页面上）发生动画，那么您可以在完成动画一次后在LocalStorage中设置cookie或设置值，然后检查后续页面中的值，因此您不会再次显示动画。您可以控制Cookie的到期时间或在LocalStorage中设置上次访问的值，以确定何时再次设置动画。

Answer 2

您需要设置一个cookie或仅在起始页面上包含动画脚本。

[编辑] 至于cookie，你只需在访问页面时设置它，例如。在Top.php文件中：

<?php
if (!isset($_COOKIE["a_meaningful_name_for_the_animation"]):
    setcookie("a_meaningful_name_for_the_animation", true);
?>
    <script src="js/animate.js"></script>
<?php endif; ?>

如果您已经使用了会话，则将该值存储在$_SESSION中的逻辑相同。

Answer 3

使用：

<?php
if (!isset($_COOKIE['first_time']))
{
    setcookie("first_time", "no");
?>
<script>// Your JavaScript here </script>
<?php
}
?>

第一行检查'“first_time”'字段是否在名为'$ _COOKIE'的关联数组中设置（表示当前为cookie）。如果未设置，则将是用户第一次请求您的页面。因此，通过设置cookie，您将阻止它们再次运行脚本。

仅在页面加载时使用jQuery动画

3 个答案: