Question

我正在尝试创建一个圆形动画，每一秒都有一个新的圆圈在新的鼠标位置。

<html>

<head>
  <title>Circle</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  <style type="text/css">
    body {
      background-color: #555;
    }
    #contentWrapper {
      width: 600px;
      height: 600px;
      margin: 20px auto;
      position: relative;
      background-color: #fff;
      background-size: cover;
    }
    .circle {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      position: absolute;
      background-color: #F00;
    }
  </style>
</head>

<body>
  <div id="pageWrapper">
    <div id="contentWrapper">

    </div>
  </div>

</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script type="text/javascript">
  $(document).ready(function() {

    // a reference to contentWrapper div element
    var contentWrapper = $('#contentWrapper');

    // Every time mouse moves, mx and my are assigned to the mouse location
    var mx = 0;
    var my = 0;
    $(document).on('mousemove', function(e) {
      mx = e.pageX - contentWrapper.offset().left;
      my = e.pageY - contentWrapper.offset().top;
    });

    // create a single circle at the center of the white box
    var aCircle = $('<div>').addClass('circle');
    aCircle.css({
      top: 300,
      left: 300
    });
    contentWrapper.append(aCircle);

  }); // document ready
</script>

</html>

我是否应该在内容包装器中有一个循环。

另外，我非常确定我应该包括一个＆＃34;计数＆＃34;代码中的某个地方。

圆形动画，每秒在鼠标位置都有一个新圆圈

0 个答案: