用js的鼠标事件onmouseover做一个“分裂”游戏

1、用dw即dreamweaver（以下简称dw），创建一个网页，命名为无聊的分裂，然后在body标签中写一个div，给它加一个样式类baoGuoYangGuang，设置div的css样式为500*500像素宽高居中的黑色球。然后请用高于IE8以上浏览器预览效果（IE8及以下不支持css圆角设置，请之后步骤都在IE8以上浏览器浏览），具体如下图所示

2、之后我们要考虑，一个球要变成4个，那么首先我们可以把这个演变过程写好。写过程之前要先设置好小球的css，然后写演变后的标签结构，为了方便大家浏览我将4个小球显示红色，具体如下图所示

3、之后我们要写js了，写js前先将演变过程添加的标签结构删除。然后我们写一个js方法fenLie()，思路就是当鼠标移动到div上时分裂出4个div，并让原来的div背景色去掉，而且一个div仅需分裂一次，所以分裂过后必须去除此div的fenLie()方法，具体步骤如下图所示（代码有不懂请注意看代码后的注释）

4、打开浏览器预览下现在的效果，大家会发现在分裂的小球都是红色，而我们希望是随机的颜色，所以呢我们必须在写一个颜色随机的方法color()，然后将color()方法返回的颜色值写入到fenLie()中去，具体步骤如下图所示（代码有不懂请注意看代码后的注释）

5、现在用浏览器预览即可看到我们想要的效果，如下图。我们看到IE8以上都是好好的，IE7、8虽然不是圆形至少也不错吧（有点像马赛克0.0），但是IE6就完全走样了。是什么原因造成IE走样呢？请看第6步

6、IE出现如上图的原因：1、设置的css宽度width:50%;不是每次50%都能是整数，但IE6渲染时始终是现实整的。2、IE的最小高度一般是12像素，所以最小高度就需要兼容处理。之后我们处理IE6，至少让它也能像马赛克那样，第一个问题我们就给每个分裂后的div加margin-right:-1px;这个样式吧，加了有点瑕疵的（将就着用吧，毕竟IE6，实在有强迫症可以换个布局方式比如定位，这里就不展开了）；第二个问题我们可以设置overflow:hidden;即可（可以加hack写法），具体如下图