11

HTML/CSS/JavaScript を使用して円形パスに沿って円を移動したいと思います。これを達成する方法はありますか？circle のコードを以下に追加します。

.circle {
    width: 50px;
    height: 50px;
    display: block;
    -webkit-border-radius: 50px;
     -khtml-border-radius: 50px;
       -moz-border-radius: 50px;
            border-radius: 50px;
    color: #fff;
    background-color: #b9c1de;
}

<div class="circle"></div>
4

4 に答える 4

18

これは、純粋な css3 で実現できます。次のように書きます。

CSS

.dot{
    position:absolute;
    top:0;
    left:0;
    width:50px;
    height:50px;
    background:red;
    border-radius:50%;
}
.sun{
    width:200px;
    height:200px;
    position:absolute;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    -webkit-animation-name:orbit;
    -webkit-animation-duration:5s;
    top:50px;
    left:50px;
}

@-webkit-keyframes orbit { 
from { -webkit-transform:rotate(0deg) } 
to { -webkit-transform:rotate(360deg) } 
}

HTML

<div class="sun">
 <div class="dot"></div>
</div>​

これをチェックしてくださいhttp://jsfiddle.net/r4AFV/

更新しました

http://jsfiddle.net/r4AFV/1/

于 2012-06-12T06:03:16.317 に答える
4

これは、私がまとめた純粋な JavaScript ソリューションです。非常に優れたブラウザー サポートが必要です (CSS3 は必要ありません)。高度な設定が可能です。JavaScript セクションの下部にある設定オプションを確認してください。ライブラリは必要ありません。

http://jsfiddle.net/nN7ct/

于 2012-06-12T06:25:13.447 に答える
2

数学の時間です！

function circle(){
    var width = 10,
        height = 10,
        offsetX = 100,
        offsetY = 100,
        x = Math.cos(new Date()) * width + offsetX;   //Remember high school?
        y = Math.sin(new Date()) * height + offsetY;

    //Do whatever you want here with the coordinates.
    document.getElementsByClassName("circle")[0].style.left = x+"px";
    document.getElementsByClassName("circle")[0].style.top = y+"px";

    setTimeout(circle, 50);
}
于 2012-06-12T05:45:10.337 に答える