如何在半圆中移动div

here is my .html file

这是我的.html文件

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

如何让我的图像与.bar div颜色一起旅行。

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

这个图像是我希望它像行的寻找者一样的地方

actual image looks like this

实际图像看起来像这样

4 个解决方案

#1

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.com/clipart-sun-clip_art_image_of_a_bright_sunshine_0071-0902-0318-3204_SMU.jpg" width="50px"/> </div>
    </div>

https://jsfiddle.net/nqc6tw5m/1/

#2

This is one way to do it As per my comment 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);}
}

#3

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?

以下是如何以半圆形旋转图像。修改了这篇文章中的代码 - 如何使用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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

#4

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.com/vector-clouds-png-KinejMzkT.png" />
    </div>
</div>

Source on codepen

codepen上的源代码

#1