7.2.3 拖动AP元素(课件）-高二《网页设计与制作》同步教学（中国人民大学出版社）

7.2.3 拖动AP元素 【拖动AP元素】行为动作允许访问者拖动网页页面中的AP元素，使用此行为可制作拼图游戏、滑块控件和其它可移动的页面元素。本例将介绍行为与AP元素结合使用的效果，在AP Div中按住鼠标并移动时，该AP元素将跟随鼠标指针移动。 （1）在菜单栏中选择【插入】→【布局对象】→AP Div命令，在网页文档中插入一个AP Div，在属性面板中，将“左”和“上”都设置为0px，将“宽”和“高”分别设置为100px、130px,如下图所示。 （2）在AP Div中插入光标，在【插入】面板的【常用】模式中单击 按钮，然后插入“welcome.png”图像文件，如图所示。 （3）选择网页文档左下角的<body >标签，打开【行为】面板，单击【添加行为】按钮 ，在弹出的菜单中选择【拖动AP元素】动作，如图所示。 （4）打开【拖动AP元素】对话框，在【基本】选项卡中，将“AP元素”设置为div“apDiv1”,“移动”设置为“不限制”，如图所示。 （5）切换到【高级】选项卡，将“拖动控制点”设置为“元素内的区域”，将“左”和“上”都设置为0，将“宽”和“高”分别设置为100、130，如图所示。 （6）单击 按钮，完成行为的添加。保存网页文档，按F12键在浏览器窗口中浏览网页，使用鼠标可拖动AP元素，如图所示。 7.2.4 显示隐藏元素 使用【显示—隐藏元素】行为动作可以显示、隐藏、恢复一个或多个AP Div的默认可见性，此行为用于网站访问者与页面进行交互时显示信息。例如，访问者将鼠标指针滑过一个对象时可以显示一个AP Div，在该AP Div中显示该对象的详细信息。 【显示—隐藏元素】行为的制作步骤如下： （1）在菜单栏中选择【插入】→【布局对象】→【AP Div】命令，在网页文档中插入二个AP Div，并且在它们中各自插入对象，如下图所示。 （2）选择apDiv1,打开【行为】面板，单击【添加行为】按钮 ，在弹出的菜单中选择【显示—隐藏元素】动作，打开【显示—隐藏元素】对话框，如图所示。 （3）在“元素”列表框中选择div“apDiv2”，然后单击下面的 按钮，单击 按钮，在行为面板中选择事件为“onMouseOver”,如图所示。 （4）重复（2）（3）步骤，在“元素”列表框中选择div“apDiv2”，然后单击下面的 按钮，单击 按钮，在行为面板中选择事件为“onMouseOut”,如图所示。 （5）保存文件，按F12键在浏览器中观看网页效果，鼠标经过apDiv1中的“显示效果”对象上时显示apDiv2中的“汽车”内容，产生隐现效果，如图所示。 $$