0

实际上，我看到了本教程，用于在鼠标悬停到图像时提供放大效果，这里的图像不在任何表格中，所以我可以通过将图像放在表格中并将图像的位置设置为相对来实现相同的效果吗？

喜欢

    <table border = '2'>
     <tr>
      <td>
         <img id="a1" src="http://demos.frnzzz.com/imgZoom/1.jpg" height="50"  width="50">
      </td>
      <td>
         <img id="a2" src="http://demos.frnzzz.com/imgZoom/1.jpg" height="50" width="50">
      </td>
     </tr>
    </table>

当我试图将图像放在表格中时，效果正在发生变化，它也增加了表格的大小，但表格的大小应该保持不变。

我正在使用以下代码为图像提供放大和缩小效果，但它在 mozilla firefox 中运行良好，但在 google chrome 中不起作用。在 chrome 中，它也在扩展表格列大小，（z-index 不起作用），img1 在表格标签内。

  function zoomIn(indexNo){
    var zoomin = $('#img1').attr("zoomin");
    if(zoomin == "false")
        {
            $('#img1').css("z-index", 1);
            $('#img1').css("position", "absolute");
            $('#img1').animate({
               height  :    l_imgHeightZoomIn,
               width   :    l_imgWidthZoomIn,
               left    :    l_imgLeftZoomIn,
               top     :    l_imgTopZoomIn
            }, "slow");
            $('#img1').attr("zoomin", "true");
        }
    }
--------------------------------------------------------------
  function zoomOut(indexNo){
    var zoomin = $('#img1').attr("zoomin");
    if(zoomin == "true")
        {
            $('#img1').css("z-index", 0);
            $('#img1').css("position", "static");
            $('#img1').animate({
                height : l_imgHeight,
                width  : l_imgWidth,
                left   : l_imgLeftZoomOut,
                top    : l_imgTopZoomOut
            }, 0);
            $('#img11').attr("zoomin", "false");

        }
    }
4

1 回答 1

2

当我阅读您的问题时，我认为您正在寻找类似http://jsfiddle.net/8umD4/4/的内容。

 img:hover
 {
   margin:0;
   padding:0;
   width:90%;
   height:90%;
 }
.formatTable td
{
width:100px;
height:100px;
text-align:center;
}  
<table border = '2' class='formatTable'>
 <tr><td>
    <img id="a1" src="http://demos.frnzzz.com/imgZoom/1.jpg" height="50" width="50" />
   </td>
   <td>
    <img id="a2" src="http://demos.frnzzz.com/imgZoom/1.jpg" height="50" width="50"/>
   </td>
 </tr>
</table>

一探究竟。如果不符合您的要求，请详细说明您的问题。

于 2013-01-29T06:54:16.657 回答