テーブルセルのdiv領域で画像の折り返しを行うにはどうすればよいですか？

Question

ライブラリやjqueryを使用せずに画像ギャラリーを作成する練習をします。私はテーブルのセルに画像を置く。私はjavascriptのmoveLeft（）とmoveright（）の関数を持っています。

画像がセル領域外に移動する不具合。私は、ユーザーがセルの境界線を通過するときに画像の一部だけを見たいと思う。

CSSコード：

#moving_image { 
    background-image: url(picture/13.jpg); 
    background-repeat: no-repeat; 
    position: relative; 
    border:1px solid red; 
    width: 130px; 
    height: 100px; 
    left: 10px; 
} 

セルのHTMLコード：moveRightため

..... 
<tr height="130"> 
    <td width ="420" height="130"> 
     <div id= "moving_image"> 
     </div> 
    </td> 
</tr> 

JavaScriptコード（）、{例として。また、私は持っていmoveLeft（）}：

<script language=javascript type="text/javascript"> 
    var x=10; 
    function moveRight() 
     var layerElement = document.getElementById("moving_image"); 
     x+=10; 
     layerElement.style.left=x; 
    } 
.... 
</script> 

だから、私は表のセル内の画像をラップするために何をすべきか？おかげ

Answer 1

は、テーブルの行と、あなたのイメージ やテーブルに与える行のCSSパラメータを含むdiv要素は「オーバーフロー：隠された」のためのzインデックスを使用してみてください別のdivと

Answer 2

トライラッピングなどの包装のdivにそのCSSを適用します：

Answer 3

解決策は、divを移動する代わりにchanegをbackground-positionにするだけです。

function moveRight() 
    var layerElement = document.getElementById("moving_image"); 
    x+=10; 
    layerElement.style.background-position=x; 
}