0

js または css で画像の位置を固定するにはどうすればよいですか? 私は観覧車を持っていますが、すべての画像が回転しながら立っている位置であることを望みます。こんな風になりたい : http://jsdo.it/proppy/plUk/fullscreenピンクの三角形を参照 回転中は位置が固定されます。

これが私のものです: http://letmespeakenglish.net/wheel/index.html

何か助けはありますか？どんな提案でも大歓迎です。ご協力ありがとうございました。

4

2 に答える 2

1

これが実際の例です

問題を解決するには、ホイール全体が回転するので、個々の画像を反対方向に回転させる必要があります。したがって、スクリプトを次のように変更すると、修正されるはずです。

<script src="http://code.jquery.com/jquery-1.6.3.min.js" type="text/javascript"></script>  
<script>
    var rotation = 0
    setInterval(function() {
        $('div.#wheel').css({
            "-moz-transform": "rotate(" + rotation + "deg)",
            "-webkit-transform": "rotate(" + rotation + "deg)",
            "-o-transform": "rotate(" + rotation + "deg)",
            "-ms-transform": "rotate(" + rotation + "deg)"
        }); 

        $('.fa').css({
        "-moz-transform": "rotate("+(-rotation)+ "deg)",
        "-webkit-transform": "rotate("+(-rotation)+ " deg)",
        "-o-transform": "rotate("+(-rotation)+ " deg)",
        "-ms-transform": "rotate("+(-rotation)+ " deg)"
    }); 

    rotation = (rotation + 10) % 361
    }, 500);
</script>

長時間見ていると吐き気がします。コードではなく、観覧車です。

于 2011-09-15T16:54:20.010 に答える
0

これで問題が解決するかどうかはわかりませんが、500 ミリ秒ごとに画像を回転させていることがわかります。これは大きな遅延です。50msで試してみてください。

    var rotation = 0
setInterval(function() {
    $('div.#wheel').css({
        "-moz-transform": "rotate(" + rotation + "deg)",
        "-webkit-transform": "rotate(" + rotation + "deg)",
        "-o-transform": "rotate(" + rotation + "deg)",
        "-ms-transform": "rotate(" + rotation + "deg)"
    }); 

        $('.fa').css({
        "-moz-transform": "rotate(1 deg)",
        "-webkit-transform": "rotate(1 deg)",
        "-o-transform": "rotate(1 deg)",
        "-ms-transform": "rotate(1 deg)"
    }); 

 rotation = (rotation + 10) % 361
}, 50)
于 2011-09-15T06:59:30.147 に答える