1

私の要素は点を一周します。 JSFiddle

HTML

<div class="center-dot">
    <div class="dot"></div>
    <div class="one"></div>
    <div class="two"></div>
</div>

CSS:

.center-dot {position:relative;top:200px;left:200px;}
.dot {width:3px;height:3px;background:blue;}
.one {width:40px;height:40px;border-radius:40px;background:red;position:absolute;}
.two {width:40px;height:40px;border-radius:40px;background:green;position:absolute;}

JS:

var one = $('.one'),
    two = $('.two');

var one_start = 0,
    two_start = 0;

setInterval(function(){
    ++one_start;
    var one_css = {
        'left': Math.sin(one_start * 0.0010) * 100 ,
        'top': Math.cos(one_start * 0.0010) * 100
    }
    one.css(one_css);

    ++two_start;
    var two_css = {
        'left': Math.sin(two_start * 0.0025) * 200 ,
        'top': Math.cos(two_start * 0.0025) * 200
    }
    two.css(two_css);
}, 1);

しかし、彼はそれを正確に行うわけではありませんが、ジグザグが好きです。

要素が円をきれいにしたことを確認するにはどうすればよいですか?

4

3 に答える 3

2

これは、サブピクセル レンダリングが原因で、「上」と「左」の代わりに変換を使用すると問題が解決するはずです。

http://jsfiddle.net/jonigiuro/HDhn4/2/

var one_css = {
    'transform': "translateX(" + (Math.sin(one_start * 0.0025) * 100) + 'px) translateY('+ Math.cos(one_start * 0.0025) * 100 + "px)"
}

このソリューションはまだクロスブラウザーではありません。そのために、プレフィックス付きの css を追加する必要がある場合があります。

また、これを読んでください：

http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

PS: 赤いボールだけに適用したので、違いがわかります。

于 2013-09-03T15:12:23.200 に答える