Question

我正在尝试将here的效果与animated background结合起来。

但是当我从HTML文件加入这两件事时，动画就停止了。可能是什么原因？是因为标签的倍增（在CSS文件中，例如.body等）？

第二件事：处理事件的最简单方法是什么？我想按一个按钮然后翻转图片（取决于从列表中选择的变量）。任何提示？

对不起伙计们，这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>Starry Night by CSS-Tricks</title>

    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="css/default.css" />
    <link rel="stylesheet" type="text/css" href="css/component.css" />
    <link rel="shortcut icon" href="../favicon.ico"> 

    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="js/jquery.backgroundPosition.js" type="text/javascript"></script>


        <script src="js/modernizr.custom.js"></script>
        <script type="text/javascript">
        $(function(){

          $('#midground').css({backgroundPosition: '0px 0px'});
          $('#foreground').css({backgroundPosition: '0px 0px'});
          $('#background').css({backgroundPosition: '0px 0px'});

            $('#midground').animate({
                backgroundPosition:"(-10000px -2000px)"
            }, 240000, 'linear');

            $('#foreground').animate({
                backgroundPosition:"(-10000px -2000px)"
            }, 120000, 'linear');

            $('#background').animate({
                backgroundPosition:"(-10000px -2000px)"
            }, 480000, 'linear');

        });
    </script>

</head>

<body>

    <div id="background"></div>
    <div id="midground"></div>
    <div id="foreground"></div>

    <div id="page-wrap">

        <h1>The Final Frontier</h1>

        <div id="sidebar">
            <h2>Sidebar</h2>

            <ul>
               <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
               <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li> 
            </ul>

        </div>

        <div id="main-content">

            <h2>Birthdate</h2>

            <p><form>
<select id="day">
        <option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option>
        <option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option>
        <option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option>              <option>19</option><option>20</option><option>21</option><option>22</option><option>23</option><option>24</option>
        <option>25</option><option>26</option><option>27</option><option>28</option><option>29</option><option>30</option>
        <option>31</option>

    </select>
    <select id="month">
        <option>1</option><option>2</option><option>3</option><option>4</option><option>5</option>
        <option>6</option><option>7</option><option>8</option><option>9</option>
        <option>10</option><option>11</option><option>12</option>
    </select>

    <button type="button">Choose</button>

</form></p>

            <h2>Animation here  </h2>

            <div class="main">
                <div id="fc-slideshow" class="fc-slideshow">
                    <ul class="fc-slides">
                        <li><img src="images/1.jpg" /><h2></h2></li>
                        <li><img src="images/2.jpg" /><h2></h2></li>
                        <li><img src="images/3.jpg" /><h2></h2></li>
                        <li><img src="images/4.jpg" /><h2></h2></li>
                        <li><img src="images/5.jpg" /><h2></h2></li>
                        <li><img src="images/6.jpg" /><h2></h2></li>
                        <li><img src="images/7.jpg" /><h2></h2></li>
                        <li><img src="images/8.jpg" /><h2></h2></li>
                        <li><img src="images/9.jpg" /><h2></h2></li>
                        <li><img src="images/10.jpg" /><h2></h2></li>
                        <li><img src="images/11.jpg" /><h2></h2></li>
                        <li><img src="images/12.jpg" /><h2></h2></li>
                    </ul>
                    <div class="mainBoard"><font color="black">



                    </font> </div>

              </div>

          </div>


        </div><!-- /container -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script src="js/jquery.flipshow.js"></script>
        <script>
            $( function() {

                $( '#fc-slideshow' ).flipshow();
            } );
    </div>
</body>

</html>

对于jQuery / javaScript，我是一个完全新手。我需要做Horoscope-site。选择出生日期并按下按钮后，动画图像应显示黄道带的正确符号。而背景中的“星星”应该一直在移动。

这是指向“moving-background”的链接： http://www.sendspace.pl/file/edfe21a5f10ef014c8111ea

请给我一些开始的东西。我需要它作为我女朋友的礼物：）

jQuery动画不适用于其他jQuery

0 个答案: