代码: <!-- * *智圆行方 MetroRect 实例 Version 1.0 *许宏旭 编制 * * *智圆行方工作室 *2011.6.27 *还“三”天呃~ * --><html><head><title>智圆行方 MetroRect 实例</title><meta charset="gb2312"><mce:script type="text/javascript" src="https://code.jquery.com/jquery-1.6.1.js" mce_src="https://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*sizevar 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> <!-- * *智圆行方 MetroRect 实例 Version 1.0 你的当前访问异常,请进行认证后继续阅读剩余内容。 提交