鼠标移至阵列图像大小应该改变

我已经实现了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>

来源

2014-02-28 Jay kumar

Didya意味着图像具有当鼠标悬停在它被放大？（喜欢它被选中？） –

是的正确，但。缩放尺寸变小 –

你可以试试这个：

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

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

或者使用纯CSS：无论图像你想有悬停效果，给它一个类： “IMG-变焦”

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

您可以调整图像缩放（宽度和高度）on .hover函数。

来源

2014-02-28 04:15:48

这个CSS样式添加到您的HTML：

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

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

来源

2014-02-28 04:24:51 TrungDQ

您的图像暂不加载我。我设置了一个不同的占位符 - http://jsfiddle.net/piedoom/JguV3/1/ –

在像你那里，你可能会更好的图像（img）当你将鼠标悬停在缩小一个表表格单元格（td）。

td:hover img { zoom: 0.5; }

当调整或将鼠标悬停在本身的时候有一个位浏览器的问题，当你悬停在上导致闪烁关闭影像悬停消失的边缘移动的图像。

想在这里看到的jsfiddle例如：http://jsfiddle.net/C24w2/1/

来源

2014-02-28 04:50:01 davur

鼠标移至阵列图像大小应该改变

回答

相关问题