如何在表格單元的div區域中進行圖像環繞？

我做了一個練習，使用任何庫或jquery編寫圖像庫w/o。我把一個圖像放到一個表格單元格中。我在JavaScript moveLeft（）和moveright（）中有函數。如何在表格單元的div區域中進行圖像環繞？

圖像移出單元格區域的錯誤。我希望用戶在通過單元格邊框時只能看到圖像的一部分。

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>

所以，我要想在表格單元格包裹的圖像呢？由於

來源

2012-01-27 tatiana_c

嘗試使用z-index的錶行，幷包含在div圖像或給錶行CSS參數「溢出：隱藏」與另一個DIV

來源

2012-01-27 18:40:46

太棒了！你是對的。謝謝。 – 2012-01-27 18:43:06

嘗試包裝和CSS應用到包裝格狀：

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

來源

2012-01-27 18:45:59

嗨安德烈，感謝您的答案。是的，它的工作原理。這跟Sergei的一樣。 – 2012-01-27 18:49:38

解決方法只是簡單地使background-position而不是移動div。

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

來源

2012-01-27 19:31:28

如何在表格單元的div區域中進行圖像環繞？

回答

相關問題