0901【任务9-1】制作包含特效的“云南旅游”网页
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
单元9 制作包含特效的网页
【引导训练】
【任务9-1】制作包含特效的“云南旅游”网页
网页0901.html的最终浏览效果如图9-6所示。
图9-6 网页0901.html的最终浏览效果【任务9-1-1】实现在网页中显示当前日期的特效
【任务描述】
在网页0901.html中文字“云南风光”的右侧显示当前日期及星期数，日期格式及顺序如图9-7所示。
图9-7 网页中显示当前日期及星期数的格式
【任务实施】
切换到【代码】视图，将光标置于“云南风光”的右侧，光标位置如图9-8所示。
图9-8 【代码】视图中的光标位置1
在光标位置输入表9-1所示的JavaScript代码。
表9-1 显示当前日期的JavaScript代码之一
【任务9-1-2】实现在不同时间段显示不同问候语的网页特效
【任务描述】
应用JavaScript的if…else if语句，在网页0901.html中当前日期及星期数的右侧根据不同时间段（采用24小时制）显示相应的问候语，具体要求如下：
（1）每天上午8点之前（不包含8点）显示“早晨好！”。
（2）每天上午12点之前（包含8点但不包含12点）显示“上午好！”。
（3）每天的12点至14点（包含12点但不包含14点）显示“中午好！”。
（4）每天的14点至17点（包含14点但不包含17点）显示“下午好！”。
（5）每天的17点之后（包含17点）显示“晚上好！”。
【任务实施】
在网页的【代码】视图中，将光标置于显示当前日期的JavaScript代码之后，即在“</script>”与“</div>”之间，然后输入表9-3所示的JavaScript代码。
表9-3 在不同时间段显示不同问候语的JavaScript代码
【任务9-1-3】实现动态改变网页中文本字体大小的网页特效
【任务描述】
动态改变网页中文本字体大小，满足不同浏览者的需求。
编写JavaScript代码，实现动态改变网页中文本字体大小的功能。
【任务实施】
1．编写改变文本字体大小的JavaScript代码
在网页的【代码】视图中，将光标置于“</head>”之前，然后输入表9-5所示的JavaScript代码。
表9-5 动态改变网页中文本字体大小的JavaScript代码
2．设置超级链接，调用改变字体大小的函数
切换到【设计视图】，在“友情链接”所在的区块，选中文字“小”，然后在【属性】面板的“链接”列表框中输入代码“javascript:setFontSize(12)”，调用改变字体大小的函数。
调用函数时传递的参数为“12”，即文本的字体大小为“12像素”。
以同样的方法选中文本“中”，在【属性】面板的“链接”列表框中输入代码“javascript:setFontSize(14.9)”；选中文本“大”，在“链接”列表框中输入代码“javascript:setFontSize(16)”。
【任务9-1-4】实现关闭网页时自动弹出对话框的特效
【任务描述】
当浏览者关闭所浏览的网页时自动弹出一个对话框，给浏览者留下深刻的印象。
编写JavaScript代码，实现关闭网页时自动弹出对话框。
【任务实施】
在网页的【代码】视图中，将光标置于“</head>”之前，然后输入表9-6所示的JavaScript代码。
表9-6 关闭网页时自动弹出对话框的JavaScript代码
在标签“<body>”中输入代码“onUnload="openWin('感谢你光临本网站')"”，结果如下所示。
<body onUnload="openWin('感谢你光临本网站')" >
当关闭该网页中会弹出如图9-10所示的对话框。
图9-10 关闭网页时自动弹出的对话框
【任务9-1-5】实现滚动网页标题栏文字的特效
【任务描述】
为了吸引浏览者注意力，经常在网页标题栏中设置标题文字的滚动效果，以突出网站的主题。
编写JavaScript代码，实现滚动网页标题栏中文字的功能。
【任务实施】
在网页的【代码】视图中，将光标置于“<head>”与“</head>”之间，然后输入表9-7所示的JavaScript代码。
表9-7 滚动标题栏文字的JavaScript代码之一
在body标签内已有的代码“<body onUnload="openWin('感谢你光临本网站')" >”中“body”的后面输入“onLoad="titleScroll()";”，结果如下所示。
<body onLoad="titleScroll()"; onUnload="openWin('感谢你光临本网站')" >
【任务9-1-6】实现鼠标指针指向不同超级链接切换不同图片的网页特效
【任务描述】
编写JavaScript代码，实现以下功能。
（1）单击网页中不同的文字型超级链接，打开一个独立的窗口显示对应图片。
（2）鼠标指针指向不同的文字型超级链接，切换不同的图片。
【任务实施】
1．编写自动切换图片的JavaScript代码
在网页的【代码】视图中，将光标置于“</head>”之前，然后输入表9-10所示的JavaScript代码。
表9-10 自动切换图片的JavaScript代码
2．添加事件触发执行程序代码
在网页的【代码】视图中，将光标置于“>玉龙雪山”左侧位置，然后输入代码“onclick="this.blur()" onMouseOver="changeView(1)"”。
在以下各行对应位置输入代码“onclick="this.blur()" onMouseOver="changeView(2)"”到“onclick="this.blur()" onMouseOver="changeView(7)"”，结果如图9-11所示。
图9-11 设置鼠标指针指向超级链接时动态切换图片的代码
【任务9-1-7】实现转动鼠标滚轮缩放图片的网页特效
【任务描述】
将鼠标置于图片上，转动鼠标滚轮时缩放图片，编写JavaScript代码实现此功能。
【任务实施】
1．编写缩放图片的JavaScript代码
在网页的【代码】视图中，将光标置于“</head>”之前，然后输入表9-11所示的JavaScript代码。
表9-11 缩入图片的JavaScript代码
2．编写代码调用函数
将光标置于标签“<img src="images/lila07.jpg" width="185" height="150" alt=""/>”内，然后输入代码“onload="javascript:if(this.width>185) this.width=185" onmousewheel="return change_imageSize(event,this)"”。
输入代码后的结果如图9-12所示：
图9-12 【代码】视图中输入转动鼠标滚轮缩放图片的代码。