文字自上而下飞舞

Question

我正在尝试制作一个横幅，其中应该有一些从上到下的文字。代码只是为了测试，看看能不能用，后面会优化。我做了这个代码：

<!DOCTYPE html>
<html>
<head>
<style>
  div.background {
    background: url(banner.jpg) repeat;
    border: 2px solid black;
  }

  div.transbox {
    margin: 30px;
    background-color: #ffffff;
    border: 1px solid black;
    opacity:0.6;
    filter:alpha(opacity=60); 
    width: 200px;
    height: 500px;
  }

  div.transbox p {
    margin: 5%;
    font-weight: bold;
    color: #000000;
  }
  #animation{font-size:20px; margin-top:40px; margin-left:50px;}
</style>

<script>

function loadImage() {
    $("#animation").animate({ marginTop: "300px" }, 1500 ).animate({ marginBottom: "40px" }, 800 );


}


</script>
</head>

<body onload="loadImage()">
    <div class="background">
      <div class="transbox" id="animation">
          <p>Text to fly in</p>
       </div>
    </div>

</body>
</html>

如果我发出警报("test");在 javascript 代码中，我收到了警报。但是当我尝试为某些东西制作动画时，什么也没有发生。所以我猜是javascript里的动画代码有问题？有人能看出我做错了什么吗？

最好的问候疯狂

Answer 1

你在这里使用 Jquery 你只是忘了将它包含到你的代码中： 工作代码：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<style>
  div.background {
    background: url(banner.jpg) repeat;
    border: 2px solid black;
  }

  div.transbox {
    margin: 30px;
    background-color: #ffffff;
    border: 1px solid black;
    opacity:0.6;
    filter:alpha(opacity=60); 
    width: 200px;
    height: 500px;
  }

  div.transbox p {
    margin: 5%;
    font-weight: bold;
    color: #000000;
  }
  #animation{font-size:20px; margin-top:40px; margin-left:50px;}
</style>

<script>

function loadImage() {
    $("#animation").animate({ marginTop: "300px" }, 1500 ).animate({ marginBottom: "40px" }, 800 );


}


</script>
</head>

<body onload="loadImage()">
    <div class="background">
      <div class="transbox" id="animation">
          <p>Text to fly in</p>
       </div>
    </div>

</body>
</html>

Answer 2

.animate() 是 jQuery 函数。您需要包含 jQuery 库才能使用它。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

Answer 3

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<style>
  div.background {
    background: url(banner.jpg) repeat;
    border: 2px solid black;
  }

  div.transbox {
    margin: 30px;
    background-color: #ffffff;
    border: 1px solid black;
    opacity:0.6;
    filter:alpha(opacity=60); 
    width: 200px;
    height: 500px;
  }

  div.transbox p {
    margin: 5%;
    font-weight: bold;
    color: #000000;
  }
  #animation{font-size:20px; margin-top:40px; margin-left:50px;}
</style>

<script>

function loadImage() {
    $("#animation").animate({ marginTop: "300px" }, 1500 ).animate({ marginBottom: "40px" }, 800 );


}


</script>
</head>

<body onload="loadImage()">
    <div class="background">
      <div class="transbox" id="animation">
          <p>Text to fly in</p>
       </div>
    </div>

</body>
</html>

Answer 4

1 包括 JQuery 库。

2 在`animate`函数中使用绝对值：

$("#animation").animate({ top: 300 }, 1500 ).animate({ top: 40 }, 800 );

为此，您需要将 <div class="transbox" id="animation"> 设置为 absolute 定位。

Answer 5

只需在页眉部分包含 jQuery 库

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

文字自上而下飞舞

flying text from top to down

javascript

banner

1 包括 JQuery 库。

2 在animate函数中使用绝对值：

2 在`animate`函数中使用绝对值：