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 では機能しません。クロムでは、テーブルの列サイズも拡張されています（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 に答える