3

我是 HTML、样式表和 Javascript 方面的新手。我创建了这个（更改图像参考）

<html>
<head>
<style>
.container
{
    width: 300px;
    height: 300px;
    position:relative;
    margin:100px;
}

.block, .center
{
    width:25%;
    height:25%;
    background:#5aa;
    border-radius:10px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-12%;
    margin-top:-12%;
}

.center
{
    width:30%;
    height:30%;
    margin-left:-15%;
    margin-top:-15%;
    border-radius:100%;
}

.tl
{
    left:20%;
    top:20%;
}
.tr
{
    left:80%;
    top:20%;
}
.br
{
    left:80%;
    top:80%;
}
.bl
{
    left:20%;
    top:80%;
}
.t
{
    top:10%;
}
.r
{
    left:90%;
}
.b
{
    top:90%;
}
.l
{
    left:10%;
}
</style>
</head>
<body>
<div class="container">

    <img src="painting\afremov_flower_ (1).jpg" class="block tl">
    <img src="painting\afremov_flower_ (1).jpg" class="block t">
    <img src="painting\afremov_flower_ (1).jpg" class="block tr">
    <img src="painting\afremov_flower_ (1).jpg" class="block l">
    <img src="painting\afremov_flower_ (1).jpg" class="center">
    <img src="painting\afremov_flower_ (1).jpg" class="block r">
    <img src="painting\afremov_flower_ (1).jpg" class="block bl">
    <img src="painting\afremov_flower_ (1).jpg" class="block b">
    <img src="painting\afremov_flower_ (1).jpg" class="block br">

</div>
</body>
</html>

现在我正在尝试围绕中心的圆圈移动框。这怎么可能？如您所见，我没有使用任何画布，所以是否可以不创建任何画布？因为我从这个站点获得了一些代码，但它们都带有画布。

感谢您的帮助和时间。

拉纳

4

1 回答 1

4

基本上这是你可以做到的：

Javascript

function drawCircle(selector, center, radius, angle, x, y) {
  var total = $(selector).length;
  var alpha = Math.PI * 2 / total;
  angle *= Math.PI / 180;

  $(selector).each(function(index) {
    var theta = alpha * index;
    var pointx  =  Math.floor(Math.cos( theta + angle ) * radius);
    var pointy  = Math.floor(Math.sin( theta + angle ) * radius );

    $(this).css('margin-left', pointx + x + 'px');
    $(this).css('margin-top', pointy + y + 'px');
  });
}

CSS

.container { 
  width:800px; margin:0 auto;
}

.box {    
  -moz-border-radius:150px;
  -webkit-border-radius:150px;
  background-position:0px 0px;
  background-color:#ccc;
  position:absolute;
  background-repeat:no-repeat;
  float:left;
  height:120px;
  margin:18px;
  position:absolute;
  width:120px;
  padding:5px;
}

HTML 标记

<div class="container">
  <img src="http://placehold.it/150x150" class="box">
  <img src="http://placehold.it/150x150" class="box">
  <img src="http://placehold.it/150x150" class="box">
  <img src="http://placehold.it/150x150" class="box">
  <img src="http://placehold.it/150x150" class="box">
  <img src="http://placehold.it/150x150" class="box">
  <img src="http://placehold.it/150x150" class="box">
  <img src="http://placehold.it/150x150" class="box">
  <img src="http://placehold.it/150x150" class="box">
</div>

在此处查看演示。

希望能帮助到你。

于 2013-08-06T09:46:56.583 回答