0

休日リストにcssトランジションを使用するにはどうすればよいですか。画像の上にマウスを置くと大きな画像サイズが表示され、マウスを外すとモーマルに戻る必要があります。javascriptでわかりますが、これを実行したいのですが。 css3を使用 http://jsfiddle.net/TwRTc/

<html>
 <head>
 <style>
# select
{
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
 </style>
  </head>
  <body>
  <table border="0" cellpadding="0" cellspacing="15" style="font-family:Comic Sans MS; color:#0066CC;">
<tr align="left">
        <TH></TH>
         <th>HOLIDAYS </th>
         <th>DAYS OBSERVED</th>
</tr>
<tr>
        <td><img class="select" src="C:/Documents and Settings/user/Desktop/new year1.jpg" width="25" height="25" border="1">&nbsp;</td>
        <td> NEW YEARS DAY </td>
        <td>JANUARY 01, 2012</td>
</tr>
<tr>
        <td><img class="select" src="C:/Documents and Settings/user/Desktop/bhogi.jpg" width="25" height="25" border="1"></td>
        <td>BHOGI/MAKAR SANKRANTHI</td>
        <td> JANUARY 13, 2012</td>
</tr>
<tr>
        <td><img src="C:/Documents and Settings/user/Desktop/republic day.jpg" width="25" height="25" border="1"></td>
        <td>REPUBLIC DAY </td>
        <td>JANUARY 26, 2012</td>
</tr>
<tr>
        <td><img src="C:/Documents and Settings/user/Desktop/ugadhi.jpg" width="25" height="25" border="1" ></td>
        <td>UGADI </td>
        <td> MARCH 23, 2012</td>
</tr>
<tr>
        <td><img src="C:/Documents and Settings/user/Desktop/good friday.jpg" width="25" height="25" border="1" ></td>
        <td>GOOD FRIDAY </td>
        <td>APRIL 06, 2012</td>
</tr>
<tr>
        <td><img src="C:/Documents and Settings/user/Desktop/independence day.jpg" width="25" height="25" border="1"></td>
        <td>INDEPENDENCE DAY</td>
        <td>AUGUST 15, 2012</td>
</tr>
<tr>
        <td><img src="C:/Documents and Settings/user/Desktop/489ramzan.gif" width="25" height="25" border="1"></td>
        <td> RAMZAN</td>
        <td>AUGUST 20, 2012</td>
</tr>
<tr>
        <td><img src="C:/Documents and Settings/user/Desktop/vinaka chowathi.jpg" width="25" height="15" border="1" ></td>
        <td>VINAYAKA CHAVITHI</td>
        <td> SEPTEMBER 19, 2012</td>
</tr>
<tr>
        <td><img src="C:/Documents and Settings/user/Desktop/dasara.jpg" width="25" height="25" border="1"></td>
        <td>DASARA</td>
        <td>OCTOBER 24, 2012</td>
</tr>
<tr>
        <td><img src="C:/Documents and Settings/user/Desktop/diwali1.jpg" width="25" height="25" border="1"></td>
        <td>DIWALI</td>
        <td>NOVEMBER 13,2012</td>
</tr>
<tr>
        <td><img src="C:/Documents and Settings/user/Desktop/images.jpg" width="25" height="25" border="1"></td>
        <td>CHRISTMAS</td>
        <td>DECEMBER 25, 2012</td>
</tr>
</table>
  </body>
</html>
4

1 に答える 1

0

CSS3スケールを使用することをお勧めします。簡単なサンプルを作成します。

これは単純な実装です。

img:hover { 
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
}

最良の視覚的結果を得るには、おそらくデフォルトの画像ビューを縮小する必要があることに注意してください。

画像が300pxx200pxの場合、次のようにします。

img {
  width: 200px; 
}

フィドルを更新しました：http：//jsfiddle.net/TwRTc/2/

于 2012-05-01T18:24:24.993 に答える