块排列并放大

来源：互联网发布：安装linux双系统编辑：程序博客网时间：2024/05/11 05:19
<img src="http://img.blog.csdn.net/20150804140151477?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><html><head><style type="text/css">#test{float:left;width:110px;height:355px;}.test{background-color:#cdc;margin:5px;font-size:20px;color:black;text-align:center;}.test1,#test11{height:200px;width:100px;}.test2,#test22{height:150px;width:100px;}.test3,#test33{height:355px;width:300px;float:left;}.enlarge{position:relative;height:125%;width:125%;background-color:#fef;font-weight:bold;font-size:40px;border:2px black solid;}</style></head><body><div id="test"><div id="test11"><div id="test1" class="test test1" onmouseover="enlarge('test1')" onmouseout="recovery('test1')">A</div></div><div id="test22"><div id="test2" class="test test2" onmouseover="enlarge('test2')" onmouseout="recovery('test2')">B</div></div></div><div id="test33"><div id="test3" class="test test3" onmouseover="enlarge('test3')" onmouseout="recovery('test3')">C</div></div></body><script type="text/javascript">var cls="enlarge";function hasClass(obj,cls){return (new RegExp("(\\s|^)"+cls+"(\\s|$)")).test(obj.className);}function addClass(obj,cls){obj.className+=" "+cls;}function removeClass(obj,cls){var reg=new RegExp("(\\s|^)"+cls+"(\\s|$)");obj.className= obj.className.replace(reg,"");}function toggleClass(obj,cls){if(hasClass(obj,cls)){removeClass(obj,cls);}else{addClass(obj,cls);}}function enlarge(idname){toggleClass(document.getElementById(idname),cls);}function recovery(idname){toggleClass(document.getElementById(idname),cls);}</script></html>
0 0