6

(position: absolute; left: 50%; margin: -50px;)100px幅のdiv（コンテナ）を中央に配置しました。

子divを絶対に配置overflow: hiddenし、そのサイズはです100x2000 px（このような高さは、以下で説明するように、テスト用です）。

子divに画像があり、絶対に配置されています。画像は3100x100 px,アニメーションのフレームが含まれています。

style.leftこの画像を0から-1100pxに変更してアニメーション化しています。ステップは、100pxです。すべて問題ありませんが、体の幅が均一でない場合、奇妙な問題が発生します。

スクロールバーがあり、スクロールバーの幅が奇数の場合に発生する可能性があります（たとえば、Chrome / Win32で発生します）。この場合、アニメーション画像が画面の端を通過するとすぐに、画像は視覚的に水平方向に1ピクセルシフトします（1920x1080の場合、アニメーションの9〜10フレームで発生します）。この動作の回避策が見つかりません。

問題を再現する実例はここにあります

スクロールバーが表示されるように、子のdivの高さは2000pxに設定されています。スクロールバーの幅が偶数の場合は、ブラウザウィンドウのサイズを奇数の幅に変更することで問題を再現できます。

4

3 に答える 3

3

これは、ブラウザがエンジンを丸めているために発生します。Webkitには50%、偶数と奇数の幅でいくつかの問題があるようです。

.outerこの問題を解決する1つの方法-ウィンドウ幅に基づいて要素を再配置します

document.getElementById( 'outer' ).style.left = Math.floor( window.innerWidth / 2 ) + 'px';

デモ

于 2012-11-24T12:19:32.023 に答える
1

javascriptに変更.inner img positionして更新する必要があります。relative私はあなたのために変更を加えたので、ここにあなたの解決されたコードがあります：

<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
        <style>
            body {
                background-color: #000000;
            }
            .outer {
                position: absolute;
                left: 50%;
                margin-left: -50px;
            }
            .inner {
                position: absolute;
                width: 100px;
                height: 2000px;
                overflow: hidden;
            }
            .inner img {
                position: relative;
                top: 0;
                left: 0;
            }
        </style>
    </head>
    <body>
        <div class="outer">
            <div class="inner">
                <img src="http://lorgame.ru/test.png" id="img">
            </div>
        </div>
        <script language="JavaScript">
            var framesCount = 30;
            var framesCurrent = 0;
            var framesMoveLeft = true;
            var img = document.getElementById('img');
            var interval = setInterval(function() {
                if(framesMoveLeft == true){
                  framesCurrent++;
                  img.style.left = (img.offsetLeft - 100) + 'px';
                  if(framesCurrent == framesCount) framesMoveLeft = false;
                } else { // Move right
                  framesCurrent--;
                  img.style.left = (img.offsetLeft + 100) + 'px';
                  if(framesCurrent == 0) framesMoveLeft = true;
                }
            }, 100);
        </script>
    </body>
</html>
于 2012-11-24T11:44:15.203 に答える
0

私には、これはChromeのバグのように思えます。パーセンテージが整数で定義されている場合、それらはかなり予期しない動作をします。代わりに、位置を小数として定義してみてください。

.outer {
    position: absolute;
    left: 49.99999%;
    margin-left: -50px;
}

私はこれをフィドルでテストしましたが、うまくいくようです。

于 2012-11-24T12:25:26.993 に答える