思洋互动网站建设学前班

淘宝商城的全局导航（2）这个图说明了从A和B的各个边界移出和移入鼠标的情况下我们要做的处理。可以看到，还是有点复杂的。这样直接导致了我们不能仅仅使用A和B的OnMouseEnter和OnMouseOut事件来处理。因为在A和B的交界上会有问题。但是是不是我们就要处理每一个边界的移入和移出的情况呢？其实是不用的。
我们通过观察发现，其实除了A和B的交界处之外，其他的边界的移入和移出基本是统一的。A区域移入都要改变颜色和B区域的显示情况，移出都要改变颜色和隐藏B区域；而B区域所有的移入都不用进行处理，而移出都要改变A的颜色和B的显示情况。所以，我们先处理A和B的边界，最后再处理交界处的问题。
经过以上分析，我们可以确定，A区域是一个动态面板组件，在鼠标进入和移出的时候改变填充颜色即可，B区域也是一个动态面板部件，其出现和隐藏由A区域的OnMouseEnter事件控制。同时，A区域和B区域中会有各种文字链和图片链接。

广州网站建设,网站建设,广州网页设计,广州网站设计
步骤1 准备A区的动态面板
01. 我们新建一个Axure RP项目，然后，从部件区域拖拽一个动态面板部件到Home页的页面区域中，属性如下

名称	部件种类	坐标	尺寸
Class1	Dynamic Panel	X44：Y35	W190：H80

02. 我们将class1动态面板的state1的名称修改为normal，然后双击normal开始编辑，在class1面板的normal状态中，我们拖拽一个新的矩形部件，属性如下

名称	部件种类	坐标	尺寸	填充色	边框
Class1NormalRectangle	Rectangle	X0：Y0	W190：H80	#8d7f7e	无

设置矩形无边框的方法是选中矩形，然后在工具栏上选择边框颜色（Line Color）按钮，然后在弹出的窗口中点击那个红色的斜线即可。

03. 接着，我们为class1新建一个状态，叫做rollover。在rollover状态中同样添加一个矩形部件，属性如下

名称	部件种类	坐标	尺寸	填充色	边框
Class1RolloverRectangle	Rectangle	X0：Y0	W190：H80	#736867	无

步骤2 准备B区的动态面板
01. 接下来，我们再拖拽一个动态面板部件到页面中，属性如下

名称	部件种类	坐标	尺寸
Subclass1	Dynamic Panel	X235：Y35	W620：H470

这个动态面板的位置与class1面板的右上角对齐。这个动态面板，就是要随着鼠标悬停不断出现和消失的面板。
02. 我们双击State1，开始编辑状态1. 在状态1中，我们拖拽一个新的矩形部件，属性如下

名称	部件种类	坐标	尺寸	填充色	边框
subclass1Rectangle	Rectangle	X0：Y0	W620：H470	#8D7F7E	无

这个矩形的填充色与左侧的矩形区域在鼠标悬停的时候更改的背景色一致，这样当subclass1动态面板出现时，与class1面板能够无缝的接在一起。
03. 然后，回到Home页面中，右键点击subclass1面板，选择Edit Dynamic Panel' Set Hidden，将它设置为隐藏，因为在默认情况下，这动态面板是不显示出来的。设置完成后，整个页面区域看起来是这个样子的

广州网站建设,网站建设,广州网页设计,广州网站设计