javascript - How to move a div in semi circle - Stack Overflow

admin管理员组

文章数量:1417685

here is my .html file

<div class="progress">
  <div class="barOverflow">
    <div class="bar"></div>
  </div>
    <div id="b" style="position:absolute;"> <img src="assets/Mostly_Cloudy.png" /> </div>
</div>

.css file

.progress{
    position: relative;
    margin-left: 100px;
    margin-top: 35px;
    margin-bottom: -52px;
    float:left;
    text-align: center;
}
.barOverflow{ /* Wraps the rotating .bar */
  position: relative;
  overflow: hidden; /* Comment this line to understand the trick */
  width: 200px; height: 100px; /* Half circle (overflow) */
  margin-bottom: -14px; /* bring the numbers up */
}
.bar{
  position: absolute;
  top: 0; left: 0;
  width: 200px; height: 200px; /* full circle! */
  border-radius: 50%;
  box-sizing: border-box;
  border: 5px solid #dedede;     /* half gray, */
  border-bottom-color: #ffde3e;  /* half azure */
  border-right-color: #ffde3e;
}

 div#b {
    width: 25%;
}

.ts file

  setTimeout(()=>{
      $(".progress").each(function(){
        var int = 100;
        var $bar = $(this).find(".bar");
        var $img = $(this).find("#b");
        var perc =100;
        $({p:0}).animate({p:perc}, {
          // duration: 1*12*60*60*1000,
          duration: 30*1000,
          easing: "swing",
          step: function(p) {
            $bar.css({
              transform: "rotate("+ (45+(p*1.8)) +"deg)", // 100%=180° so: ° = % * 1.8
              // 45 is to add the needed rotation to have the green borders at the bottom
            });
          }
        });

      $("#b").animate({left: "+="+perc},{
        duration:30*1000,
        easing:"swing"
      });

      });

    },100)

by referring this stack Question i got the idea of rotating but i am not able to move my image along with the rotation.

how to make my image to travel along with the .bar div color.

this image is some where i wanted it to act like seeker for the line

actual image looks like this

here is my .html file

<div class="progress">
  <div class="barOverflow">
    <div class="bar"></div>
  </div>
    <div id="b" style="position:absolute;"> <img src="assets/Mostly_Cloudy.png" /> </div>
</div>

.css file

.progress{
    position: relative;
    margin-left: 100px;
    margin-top: 35px;
    margin-bottom: -52px;
    float:left;
    text-align: center;
}
.barOverflow{ /* Wraps the rotating .bar */
  position: relative;
  overflow: hidden; /* Comment this line to understand the trick */
  width: 200px; height: 100px; /* Half circle (overflow) */
  margin-bottom: -14px; /* bring the numbers up */
}
.bar{
  position: absolute;
  top: 0; left: 0;
  width: 200px; height: 200px; /* full circle! */
  border-radius: 50%;
  box-sizing: border-box;
  border: 5px solid #dedede;     /* half gray, */
  border-bottom-color: #ffde3e;  /* half azure */
  border-right-color: #ffde3e;
}

 div#b {
    width: 25%;
}

.ts file

  setTimeout(()=>{
      $(".progress").each(function(){
        var int = 100;
        var $bar = $(this).find(".bar");
        var $img = $(this).find("#b");
        var perc =100;
        $({p:0}).animate({p:perc}, {
          // duration: 1*12*60*60*1000,
          duration: 30*1000,
          easing: "swing",
          step: function(p) {
            $bar.css({
              transform: "rotate("+ (45+(p*1.8)) +"deg)", // 100%=180° so: ° = % * 1.8
              // 45 is to add the needed rotation to have the green borders at the bottom
            });
          }
        });

      $("#b").animate({left: "+="+perc},{
        duration:30*1000,
        easing:"swing"
      });

      });

    },100)

by referring this stack Question i got the idea of rotating but i am not able to move my image along with the rotation.

how to make my image to travel along with the .bar div color.

this image is some where i wanted it to act like seeker for the line

actual image looks like this

• javascript
• jquery
• html
• css
• ionic2

Share Improve this question Follow edited Jun 15, 2017 at 10:17 Mohan Gopi asked Jun 15, 2017 at 9:58 Mohan GopiMohan Gopi 7,7241818 gold badges6969 silver badges118118 bronze badges 3

• The best way to do this is to use canvas. – Daniel Mizerski Commented Jun 15, 2017 at 10:03
• simplest solution I can think of is to make the image be inside of a larger div (attached to it's top left. The div itself is "attached" to the bottom center of that whole thing and just rotate the whole div clockwise, while rotating the image counterclockwise at the same speed to make it seem as if it is just moving. – Dellirium Commented Jun 15, 2017 at 10:15
• please look at my updated question – Mohan Gopi Commented Jun 15, 2017 at 10:17

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

Try to make some more modifications. Maybe will be what you expect.

 <div class="barOverflow">
<div class="bar">
<div id="b" style="position:absolute;"> <img src="http://images.clipartpanda./clipart-sun-clip_art_image_of_a_bright_sunshine_0071-0902-0318-3204_SMU.jpg" width="50px"/> </div>
    </div>

https://jsfiddle/nqc6tw5m/1/

This is one way to do it As per my ment on your post.

FIDDLEJS link

.large {
  position: absolute;
  background-color: red;
  height: 50px;
  width: 200px;
  top: 100px;
  left: 50px;
  transform: rotate(180deg);
  animation-name: rotate;
  animation-duration: 4s;
  /*animation-iteration-count: infinite;*/
  animation-timing-function: linear;
}

@-webkit-keyframes rotate {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(180deg);}
}

/* Standard syntax */
@keyframes rotate {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(180deg);}
}

.small {
  position: relative;
  width: 40px;
  height: 40px;
  background-color: green;
  top: 5px;
  left: 5px;
  transform: rotate(-180deg);
  animation-name: rotateCCW;
  animation-timing-function: linear;
  animation-duration: 4s;
  /*animation-iteration-count: infinite;*/
}

@-webkit-keyframes rotateCCW {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(-180deg);}
}

/* Standard syntax */
@keyframes rotateCCW {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(-180deg);}
}

Here's how you can rotate the image in semi circle. Modified the code from this post - How to make an image move in a circular path using jquery?

var t = 0;

function moveit() {
    t += 0.05;

    var r = -100;
    var xcenter = 100;
    var ycenter = 100;
    var newLeft = Math.floor(xcenter + (r * Math.cos(t)));
    var newTop = Math.floor(ycenter + (r * Math.sin(t)));
    $('#friends').animate({
        top: newTop,
        left: newLeft,
    }, 10, function() {
        if(newLeft<199)
        {
          moveit();
        }
        
    });
}

$(document).ready(function() {
    moveit();
});

#friends { position: absolute; }

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img src="http://jsfiddle/img/logo.png" 
id="friends"/>

I did it in canvas way, adding some changes. It is more performant approach with a spice of async frames. Featuring transparent background.

<div class="progress">
    <canvas id="canvas"></canvas>
  <div class="container">
    <img src="http://images.clipartpanda./vector-clouds-png-KinejMzkT.png" />
    </div>
</div>

Source on codepen

本文标签： javascriptHow to move a div in semi circleStack Overflow