计算机网络与网页制作 Chapter18:用行为增加页面的互动 复旦大学计算机学院 肖川 xiao@fudan edu cn 1
计算机网络与网页制作 Chapter 18：用行为增加页面的互动 复旦大学计算机学院 肖川 cxiao@fudan.edu.cn 1
目标 行为的含义 *为网页对象添加动作 *选择触发动作的事件 *使用行为增加页面的交互性 *在页面内创建可拖放的对象
目标 行为的含义 为网页对象添加动作 选择触发动作的事件 使用行为增加页面的交互性 在页面内创建可拖-放的对象 2
新大陆手机商城 页产品务关于我们联系我们 随点地图1最 效果 手机图集 资讯导购 三里55830 1234 苹果 iPhone45 小米手机 苹集 IPhone4 幸爱1T18i 诺基亚N9 三星90 降价且! 新大陆手机商城 篇页产品形务天于共们联系线们 站点地旧1景 你知道这些手机的型号吗? 资讯导购 三星S5830 一请把手机图片拖至其正确型号的方框内 苹果 i Phone45 小米手机 苹果 iPhone4 It 索爱LT8i 诺基亚N9 三里19000 降价信息! 您知道妈?我们致力于使我们的客户有 galaxy 来自世界各地的最高品质的手机和设备 我们与供应商之闭的关系,使我们能够握 供最低的产品价格 3 新大陆手机商城◎版权所有
效果 3
1.什么是行为? *行为=事件+动作 交换图像 CS*式AP元标签检查 弹单出信息 属性行为标签ody> 恢复交换图像 回(+ 打开浏览器窗口 拖动AP元素 “行为”面板「onmr 改变属性 效果 onDblclick 显示-隐范元素 rror 检查插件 nKeyD 检查表单 onkeypress 设置文本 调用J avast onMousedown 跳转菜单 onMouseMove onMouseOut 跳转菜单开始 onMouseOver 转到URL onMouseUp onUnload 预先载入图像 获取更多行为
1. 什么是行为？ 行为 = 事件 + 动作 “行为”面板 4
行为的本质 *行为是由事件触发的动作; *事件是用户的某个操作,如打开页面、单 击鼠标、移动鼠标等; *动作是用 JavaScript语言编写的函数,它具 有某项功能,如显示隐藏页面元素、弹出 信息等; 行为的本质是建立事件与动作的关联,使 得浏览器捕获到这个事件时自动触发指定 的动作
行为的本质 行为是由事件触发的动作； 事件是用户的某个操作，如打开页面、单 击鼠标、移动鼠标等； 动作是用JavaScript语言编写的函数，它具 有某项功能，如显示-隐藏页面元素、弹出 信息等； 行为的本质是建立事件与动作的关联，使 得浏览器捕获到这个事件时自动触发指定 的动作。 5
2.为超链接添加“显示-隐藏元素”动作 首页:产品:服务:关于我们;联系我们 *添加链接 手机图集 12345 首页:产品:服务:关于我们:联系我们 插入 布局◆ 标准扩展 手机图集 国插入Div标签 12245 绘制Aiv 自spry菜单栏 绘制APDⅳ后选择 菜单插入>>图像 图spry选项卡式面板 图spry折叠式 → SpRy可折叠面板 图表格 在上面插入行 在下面插入行 6
2.为超链接添加“显示-隐藏元素”动作 添加链接 绘制AP Div后选择 菜单 插入>>图像 6
重复绘制APDⅳ并层叠 phone phone AP Div *分别插入图像 首页;产品:服务:关于我们氵联系我们 *层叠 手机图集 12345 1035
重复绘制AP Div并层叠 phone1～phone6 AP Div 分别插入图像 层叠 7
为数字链接“1添加动作 标签检查器 属性们标签(> bodv><中区 ≡日三 交换图像 恢复交换图像 显示-隐藏元素 打开浏览器窗口 「确定 拖动AP元素 改变属性 效果 显示[隐藏】[默认 显示元素A 检查表单 设置文本 显示-隐藏元素 调用 JavaScript 照 跳转菜单 帮助 显示]隐藏[默认
为数字链接“1”添加动作 8
设置将引发这个动作的事件 CSs样式」AP元素」标签检查器 属性行为标签④ =+ 手机图集 显示_隐藏元素 23455 只显示 phone1AP Dⅳ,其他Dⅳ则隐藏 onClick onDblClick onFocus onkeyDown onkeyPress onKeyUp onMouseDown onMouseMove MouseOver nMouseUp 9
设置将引发这个动作的事件 只显示phone1 AP Div，其他Div则隐藏 9
为数字链接2~6添加类似的行为 事件: on Mouseover *动作:隐藏显示元素 *每个链接要显示或隐藏的APDi是不同的
为数字链接2～6添加类似的行为 事件：onMouseOver 动作：隐藏-显示元素 每个链接要显示或隐藏的AP Div是不同的 10