admin管理员组

文章数量:1023251

I am new in HTML, style sheet and Javascript. I created this (change image reference)

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

Now I am trying to move boxes around the circle present in center. How is it possible? As you can see I have not use any canvas so is it possible without any canvas creation? Because I got some code from this site but they are all with canvas.

Thanks for your help and time.

Rana

I am new in HTML, style sheet and Javascript. I created this (change image reference)

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

Now I am trying to move boxes around the circle present in center. How is it possible? As you can see I have not use any canvas so is it possible without any canvas creation? Because I got some code from this site but they are all with canvas.

Thanks for your help and time.

Rana

  • javascript
  • css
  • image
Share Improve this question edited Aug 6, 2013 at 15:07 NDM 6,8403 gold badges41 silver badges54 bronze badges asked Aug 6, 2013 at 9:24 ranarana 771 gold badge2 silver badges9 bronze badges 0
Add a ment  | 

1 Answer 1

Reset to default 4

Basically this is how you could do it:

The 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');
  });
}

The 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;
}

The HTML markup

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

See DEMO here.

Hope it helps.

I am new in HTML, style sheet and Javascript. I created this (change image reference)

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

Now I am trying to move boxes around the circle present in center. How is it possible? As you can see I have not use any canvas so is it possible without any canvas creation? Because I got some code from this site but they are all with canvas.

Thanks for your help and time.

Rana

I am new in HTML, style sheet and Javascript. I created this (change image reference)

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

Now I am trying to move boxes around the circle present in center. How is it possible? As you can see I have not use any canvas so is it possible without any canvas creation? Because I got some code from this site but they are all with canvas.

Thanks for your help and time.

Rana

  • javascript
  • css
  • image
Share Improve this question edited Aug 6, 2013 at 15:07 NDM 6,8403 gold badges41 silver badges54 bronze badges asked Aug 6, 2013 at 9:24 ranarana 771 gold badge2 silver badges9 bronze badges 0
Add a ment  | 

1 Answer 1

Reset to default 4

Basically this is how you could do it:

The 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');
  });
}

The 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;
}

The HTML markup

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

See DEMO here.

Hope it helps.

本文标签： cssHow to move images around a circle with javascriptstyle and HTMLStack Overflow

版权声明：本文标题：css - How to move images around a circle with javascript, style and HTML - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745581155a2157319.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。