0

所以说我有以下 javascript 动画：

window.onload = function (){
    var paper = new Raphael( 0, 0, 800, 600);
    var backGround = paper.rect(0,0,800,600);
    backGround.attr({ fill: "blue"});

    var ball = paper.circle(50,50,30);
    ball.attr({ fill: "45-orange-yellow"});

    function bounce_up1(){
        ball.animate({cy: 50,cx: 750}, 1000,'ease-out',bounce_drop2);   
    }

    function bounce_drop1(){
            ball.animate({cy: 570,cx: 400}, 1000, 'ease-in', bounce_up1);   
    }

    function bounce_up2(){
        ball.animate({cy: 50,cx: 50}, 1000,'ease-out',bounce_drop1);    
    }

    function bounce_drop2(){
        ball.animate({cy: 570,cx: 400}, 1000, 'ease-in', bounce_up2);   
    }

    bounce_drop1();

};

我希望它位于此 HTML5 代码中的“动画”Div 中：

<!doctype html>
<html>
<head>
  <script src="raphael-min.js" type="text/javascript"></script>
  <script type="text/javascript" src="bounce.js"></script>
<meta charset="utf-8">
<title>Tom Wija's Coursework</title>
<link href="styles/coursework.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
  <div id="header"><h1>Thomas Wija: Coursework</h1></div>
  <div id="navbar">
        <ul>
            <li><a href="#">Home</a></li>
                        <li><a href="#">CV</a></li>
                        <li><a href="#">Video</a></li>
                        <li><a href="#">Hobbies</a></li>
                        <li><a href="#">Past Work</a></li>
                        <li><a href="#">Animation</a></li>  
        </ul>
    </div>
  <div id="content">
    <div id="animation">
    </div>
    <p>Lorem ipsum dolor sit amet</p>
   </div>
</div>
</body>
</html>

如果我希望 javascript 动画bounce.js 嵌套在动画 div 中，而不是像现在那样只渲染在屏幕的右上角，我该怎么做呢？

4

1 回答 1

0

Without running your code I can't see how those elements are being placed. But if they are being positioned absolutely then set the containing div to position relative. Then anything that is positioned absolutely is within that 'relative' div. otherwise use a canvas?

于 2013-10-26T23:07:28.337 回答