如何在表格单元格的 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 代码：

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

moveRight() 的 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

尝试对表格行和包含图像的 div 使用 z-index
或给表行 CSS 参数“overflow:hidden”

Answer 2

尝试用另一个 div 进行包装，并将该 css 应用于包装 div，如下所示：

<td>
   <div style="position:relative;overflow:hidden">
     <div id= "moving_image">
     </div>
   </div>
</td>

Answer 3

解决方案很简单，将 chaneg 设置为背景位置，而不是移动 div。

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