Question

我的页面位于www.thetotempole.ca/javas2.html/，基本上我有一张带有图像的表格，当用户滚动其中一张图像时，我希望它放大，然后在推出时恢复正常。无论如何这可以做到吗？这是我的javascript / HTML代码：

<!DOCTYPE html>
   <head>
      <script>
         var today = new Date();
         var daynames = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
         var monthnames = new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
         var prodnames = new Array("Apple","Dell","IBM","Toshiba","Atari");
         var imgArray = new Array();

            imgArray[0] = new Image();
            imgArray[0].src = 'images/apple.jpg';

            imgArray[1] = new Image();
            imgArray[1].src = 'images/dell.jpg';

            imgArray[2] = new Image();
            imgArray[2].src = 'images/ibm.jpg';

            imgArray[3] = new Image();
            imgArray[3].src = 'images/toshiba.jpg';

            imgArray[4] = new Image();
            imgArray[4].src = 'images/atari.jpg';

            imgArray[5] = new Image();
            imgArray[5].src = 'images/commodore.jpg';

         prodnames.push("Commodore");

         var proddescs = new Array();
         proddescs[0] = "It might be fruit, or it might be an iPhone";
         proddescs[1] = "Buy this one online at dell.com";
         proddescs[2] = "If you want a mainframe they still have some";
         proddescs[3] = "Get a discount through SAIT (maybe)";
         proddescs[4] = "Try a classic gaming machine";
         proddescs[5] = "64k should be enough for anyone";
         //alert(proddescs);
      </script>
   </head>
   <body>
      <table border="1">
         <tr>
            <th>Product Name</th>
            <th>Product Description</th>
            <th>Product Images</th>
         </tr>
         <script>
            for (var i=0; i<prodnames.length; i++)
            {
               document.write("<tr>");
               document.write("<td>" + prodnames[i] + "</td>");
               document.write("<td>" + proddescs[i] + "</td>");
               document.write("<td>" + imgArray[i] + "</td>");
               document.write("</tr>");
            }
         </script>
      </table>
      <p>
         <script>
            //Tuesday Nov. 5, 2013
            var dayofweek = daynames[today.getDay()];
            //alert(dayofweek);
            var month = monthnames[today.getMonth()];
            var dateofmonth = today.getDate();
            var year = today.getFullYear();
            alert(dayofweek + " " + month + ". " + dateofmonth + ", " + year);
            document.write(dayofweek + " " + month + ". " + dateofmonth + ", " + year);
         </script>
      </p>
   </body>
</html>

谢谢！

Answer 1

如今，使用CSS很容易做到这一点：

table td:hover img {
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
}

我在jsBin上有一个工作示例（经过一些清理）：http://jsbin.com/iDiHErO/1/edit

如何在翻转时使Javascript图像放大

1 个答案: