Question

所以说我有以下一点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代码中的“Animation”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中，而不是像现在一样在屏幕的右上角渲染，我该怎么做呢？

Answer 1

如果不运行代码，我无法看到这些元素的放置方式。但如果它们被绝对定位，那么将包含div设置为相对位置。然后绝对定位的任何东西都在那个'相对'div内。否则使用画布？

我如何让一个javascript动画坐在div中

1 个答案: