新JavaScript+jQuery网页特效设计实例教程 教学课件 陈承欢 单元1 设计基本网页特效.ppt

在线教务辅导网:
教材其余课件及动画素材请查阅在线教务辅导网
QQ:349134187 或者直接输入下面地址:
http://shop106150152.
单元1 设计基本网页特效
任务1-1 JavaScript实现动态加
载网页内容
网页中常见的底部导航栏与版权信息如图1-1所示。
图1-1 网页的底部导航栏与版权信息
图1-1所示的底部导航栏与版权信息可以采用HTML代码实现,代码如表1-1所示。
也可以采用JavaScript代码实现,对应的JavaScript代码如表1-2所示。
序号
程序代码
01
02
03
04
05
06
07
08
<div id="innerWrapper">
<div id="ly-footer">
联系我们&nbsp; |&nbsp; 网站地图&nbsp; |&nbsp; 旅游调查&nbsp; | &nbsp;
用户留言&nbsp;|&nbsp; 设为首页&nbsp; |&nbsp; 收藏本站<br />
e游天下网版权所有 Copyright 2013-2016 © 蝴蝶工作室<br />
为了您正常地浏览页面,推荐使用分辨率为1080×800及以上
</div>
</div>
表1-1 实现网页底部导航栏与版权信息的HTML代码
序号
程序代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
<div id="innerWrapper">
<div id="ly-footer">
<script language="JavaScript" type="text/javascript">
<!--
var footerContent ;
footerContent = "联系我们| 网站地图| 旅游调查| ";
footerContent += "用户留言| 设为首页| 收藏本站<br />";
footerContent += " e游天下网版权所有 Copyright 2013-2016 © 蝴蝶工作室<br />";
footerContent += "为了您正常地浏览页面,推荐使用分辨率为1080×800及以上";
(footerContent);
// -->
</script>
</div>
</div>
任务1-2 jQuery实现网页收藏
在浏览该网页时,单击网页中的“添加收藏”超链接,会弹出如图1-2所示的【添加到收藏夹】对话框,在该对话框中单击【确定】按钮,则会将对应网页添加到收藏夹。
图1-2 【添加到收藏夹】对话框
这里的添加收藏功能采用jQuery方式实现,代码如表1-3所示。
序号
程序代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
<script language="javascript" type="text/javascript" src="js/"></script>
<script language="javascript" type="text/javascript" >
//加入收藏夹
$(document).ready(function() {
$("#favorite").click(function() {
try{
if () { //适用于IE浏览器
('', '科e互联| IT建站之选')
} else if () { //适用于Firefox浏览器
('科e互联| IT建站之选', '', "")
}
}catch(e) { //当无法取得收藏效果,弹出收藏失败窗口
alert('加入收藏失败,请使用Ctrl+D进行添加')
}
});
});
</script>
表1-3 实现网页收藏功能的JavaScript代码