代码: <!-- * *智圆行方 MetroRect 实例 Version 1.0 *许宏旭 编制 * * *智圆行方工作室 *2011.6.27 *还“三”天呃~ * --> <html> <head> <title>智圆行方 MetroRect 实例</title> <meta charset="gb2312"> <mce:script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.js" mce_src="http://code.jquery.com/jquery-1.6.1.js"><!-- //src后面的值是JQuery库的路径,你要是下载了可以改成你的相对目录,这里借用官网的地址 // --></mce:script> <mce:style type="text/css"><!-- div.MetroRect { background:url("E:/My Documents/My Pictures/zyxf.jpg");//图片路径,自己更换 background-size: 100% 100%; width:80; height:50; opacity:0.5 } td { align:center; } --></mce:style><style type="text/css" mce_bogus="1"> div.MetroRect { background:url("E:/My Documents/My Pictures/zyxf.jpg");//图片路径,自己更换 background-size: 100% 100%; width:80; height:50; opacity:0.5 } td { align:center; }</style> </head> <body> <mce:script type="text/javascript"><!-- window.onbeforeunload = function(){ return "感谢您对 智圆行方 MetroRect 的支持!";} var size=5;//size表示方格大小为size*size var defaultWidth=80;//每个格子默认宽度,注意此处更改了,上面的Style中(width)也要改 var defaultHeight=50; //每个格子默认高度,注意此处更改了,上面的Style中(height)也要改 var changeSize=3;//激活后,格子放大到原来的几倍 $(document).ready(function(){//下面的算法不讲,自己琢磨,有慧根的看得懂,木有的别怪我。本来我只是想放出接口供用,但HTML是不可能不开源的。 $("div").bind("mouseover",function(event){ $(event.target).stop(); $(event.target).animate({opacity:'1.0',width:defaultWidth*changeSize,height:defaultHeight*changeSize},"fast"); var thisid=$(event.target).attr("id"); var row=Math.floor((thisid-1)/size); var col=thisid-row*size; row++; for(var i=1;i<=size;i++) { for(var j=1;j<=size;j++) { var curID=(parseInt(i)-1)*size+parseInt(j,10); if(curID==thisid) { continue; } if(i==row) { $("#"+curID).stop(); $("#"+curID).animate({opacity:'0.5',height:defaultHeight*changeSize,width:defaultWidth},"slow"); } else if(j==col) { $("#"+curID).stop(); $("#"+curID).animate({opacity:'0.5',width:defaultWidth*changeSize,height:defaultHeight},"slow"); } else { if(!$("#"+curID).is(":animated")) { $("#"+curID).animate({opacity:'0.5',width:defaultWidth,height:defaultHeight},"slow"); } } } } }); $("div").bind("mouseleave",function(event){ $(event.target).stop(); $(event.target).animate({opacity:'0.5',width:defaultWidth,height:defaultHeight},"slow"); var thisid=$(event.target).attr("id"); var row=Math.floor((thisid-1)/size); var col=thisid-row*size; row++; for(var i=1;i<=size;i++) { for(var j=1;j<=size;j++) { var curID=(parseInt(i)-1)*size+parseInt(j,10); if(curID==thisid) { continue; } if(i==row || j==col) { $("#"+curID).stop(); $("#"+curID).animate({opacity:'0.5',width:defaultWidth,height:defaultHeight},"slow"); } } } }); $("button[name='button']").click(function(event){ if(!jQuery.fx.off) { $("button[name='button']").html("使用动画"); } else { $("button[name='button']").html("取消动画"); } jQuery.fx.off=!jQuery.fx.off; }); }); document.write("<table>"); for(var i=1;i<=size;i++) { document.write("<tr>"); for(var j=1;j<=size;j++) { document.write("<td align='center'><div class='MetroRect' id='"+((parseInt(i)-1)*size+parseInt(j,10)).toString()+"'></div></td>"); } document.write("</tr>"); } document.write("</table>"); document.write("<button name='button'>取消动画</button>") // --></mce:script> </body> </html>