Question

我已经实现了Java脚本游戏。我的游戏是表格式的。在存储的图像阵列中。当移动图像时，图像尺寸应该改变。即大图像到小图像。我添加了以下代码，请告诉我合适的答案。

<script language="JavaScript">
            document.open("text/plain");
            document.writeln("<table border=3 cellpadding=0 bordercolor=silver width=100% height=450px cellspacing=1 style=\"background-color:#e7e7e7; z-index:5; \" class=\"col-lg-12 col-md-12 col-sm-12\">");
            for (j=0; j<Size; j++)
            { document.writeln("<tr width=50px height=0px align=center >");
              for (i=0; i<Size; i++)

              document.writeln("<td class=\"candy\"><IMG src=\"images\ball0.gif\" class=\"img-responsive\" border=0 onMouseDown=\"Clicked("+i+","+j+")\"></td>");
              document.writeln("</tr>");
            }
            document.writeln("</table>");
            document.close();
            </script>

Answer 1

你可以试试这个：

http://jsfiddle.net/jcoc611/RC7kb/

$('#image').hover(function(){
    $(this).css({width:"100%",height:"100%"});
},function(){
    $(this).css({width:"50%",height:"50%"});   
});

或使用普通css：无论您想要悬停效果的哪个图像，都要给它一个类：“img-zoom”

 .img-zoom:hover {
        zoom: 0.5;
    }

您可以在.hover功能上调整图像缩放（宽度和高度）。

Answer 2

将此CSS样式添加到HTML：

.img-responsive:hover {
    zoom: 50;
}

演示：http://jsfiddle.net/piedoom/JguV3/1

Answer 3

在您所拥有的表格中，当您将鼠标悬停在表格单元格（img）上时，最好缩小图像（td）。

td:hover img { zoom: 0.5; }

当您将鼠标悬停在自身上时调整大小或移动图像时，当您将鼠标悬停在悬停时消失的边缘时会出现一些浏览器问题，导致图像闪烁。

请参阅此处的jsfiddle示例：http://jsfiddle.net/C24w2/1/

鼠标在数组图像大小应该更改

3 个答案: