Question

我是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>

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

感谢您的帮助和时间。

拉纳

Answer 1

基本上你可以这样做：

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>

请参阅DEMO here。

希望它有所帮助。

如何使用javascript，样式和HTML在圆圈周围移动图像

1 个答案: