87,997
社区成员
发帖
与我相关
我的任务
分享求解！JS制作全屏背景图思路！！！
最近在折腾一个项目，在做登录页面。想用全屏图片来当背景。于是刚开始的思路认为只要将图片设置成 width:100%; height:100%; 然后就可以了，发现这样做法，会导致图片拉伸。所以我又去了找了一些全背景登录的网站。比如网易的LOFTER 地址：http://www.lofter.com/，发现其页面不管窗口怎样改变和拉伸，图片的位置：1.不会拉伸难看，2.把图片中间的内容放在窗口中间来显示。
所以我就郁闷了，于是又去Google了一下，找到了一个jQuery 写的全背景图插件，也是自适应窗口来改变图片。实现的原理和Lofter基本是差不多的，所以又看了这插件的源码，里面有一些代码和思路不是能理解。实在是太笨，希望各位能帮小弟来说一下这个思路。
插件地址：http://johnpatrickgiven.com/jquery/background-resize/
JS源码地址：http://johnpatrickgiven.com/jquery/background-resize/js/jquery.ez-bg-resize.js
下面本人在把源码贴上，将一些不理解的地方指出，望各位高手帮小弟整理出思路
疑问点：插件是如何制作这个比例的。思路是什么！
疑问代码:
1. var fRatio = iw/ih; //这里无法理解这个 是算比例吗？？？
2. $("#jq_ez_bg").children("img").css("width",Math.round($(window).height() * (1/fRatio)));
//还有这里的 Math.round($(window).height() * (1/fRatio)) 前面为什么要用窗口的高度，和 后面的为什么要用 1来除，，这又是为了什么？？？
所以我就郁闷了，于是又去Google了一下，找到了一个jQuery 写的全背景图插件，也是自适应窗口来改变图片。实现的原理和Lofter基本是差不多的，所以又看了这插件的源码，里面有一些代码和思路不是能理解。实在是太笨，希望各位能帮小弟来说一下这个思路。
插件地址：http://johnpatrickgiven.com/jquery/background-resize/
JS源码地址：http://johnpatrickgiven.com/jquery/background-resize/js/jquery.ez-bg-resize.js
下面本人在把源码贴上，将一些不理解的地方指出，望各位高手帮小弟整理出思路
/******************************************************
* jQuery plug-in
* Easy Background Image Resizer
* Developed by J.P. Given (http://johnpatrickgiven.com)
* Useage: anyone so long as credit is left alone
******************************************************/
(function($) {
// Global Namespace
var jqez = {};
// Define the plugin
$.fn.ezBgResize = function(options) {
// Set global to obj passed
jqez = options;
// If img option is string convert to array.
// This is in preparation for accepting an slideshow of images.
if (!$.isArray(jqez.img)) {
var tmp_img = jqez.img;
jqez.img = [tmp_img]
}
$("<img/>").attr("src", jqez.img).load(function() {
jqez.width = this.width;
jqez.height = this.height;
// Create a unique div container
$("body").append('<div id="jq_ez_bg"></div>');
// Add the image to it.
$("#jq_ez_bg").html('<img src="' + jqez.img[0] + '" width="' + jqez.width + '" height="' + jqez.height + '" border="0">');
// First position object
$("#jq_ez_bg").css("visibility","hidden");
// Overflow set to hidden so scroll bars don't mess up image size.
$("body").css({
"overflow":"hidden"
});
resizeImage();
});
};
$(window).bind("resize", function() {
resizeImage();
});
// Actual resize function
function resizeImage() {
$("#jq_ez_bg").css({
"position":"fixed",
"top":"0px",
"left":"0px",
"z-index":"-1",
"overflow":"hidden",
"width":$(window).width() + "px",
"height":$(window).height() + "px",
"opacity" : jqez.opacity
});
// Image relative to its container
$("#jq_ez_bg").children("img").css("position", "relative");
//Resize the img object to the proper ratio of the window
var iw = $("#jq_ez_bg").children("img").width();
var ih = $("#jq_ez_bg").children("img").height();
if ($(window).width() > $(window).height()) {
console.log(iw, ih);
if (iw > ih) {
//一是这里无法理解这个 是算比例吗？？？
var fRatio = iw/ih;
$("#jq_ez_bg").children("img").css("width",$(window).width() + "px");
//还有这里的 Math.round($(window).height() * (1/fRatio)) 前面为什么要用窗口的高度，和 后面的为什么要用 1来除，，这又是为了什么？？？
$("#jq_ez_bg").children("img").css("height",Math.round($(window).width() * (1/fRatio)));
var newIh = Math.round($(window).width() * (1/fRatio));
if(newIh < $(window).height()) {
var fRatio = ih/iw;
$("#jq_ez_bg").children("img").css("height",$(window).height());
$("#jq_ez_bg").children("img").css("width",Math.round($(window).height() * (1/fRatio)));
}
} else {
var fRatio = ih/iw;
$("#jq_ez_bg").children("img").css("height",$(window).height());
$("#jq_ez_bg").children("img").css("width",Math.round($(window).height() * (1/fRatio)));
}
} else {
var fRatio = ih/iw;
$("#jq_ez_bg").children("img").css("height",$(window).height());
$("#jq_ez_bg").children("img").css("width",Math.round($(window).height() * (1/fRatio)));
}
// Center the image
if (typeof(jqez.center) == "undefined" || jqez.center) {
if ($("#jq_ez_bg").children("img").width() > $(window).width()) {
var this_left = ($("#jq_ez_bg").children("img").width() - $(window).width()) / 2;
$("#jq_ez_bg").children("img").css({
"top" : 0,
"left" : -this_left
});
}
if ($("#jq_ez_bg").children("img").height() > $(window).height()) {
var this_height = ($("#jq_ez_bg").children("img").height() - $(window).height()) / 2;
$("#jq_ez_bg").children("img").css({
"left" : 0,
"top" : -this_height
});
}
}
$("#jq_ez_bg").css({
"visibility" : "visible"
});
// Allow scrolling again
$("body").css({
"overflow":"auto"
});
}
})(jQuery);
疑问点：插件是如何制作这个比例的。思路是什么！
疑问代码:
1. var fRatio = iw/ih; //这里无法理解这个 是算比例吗？？？
2. $("#jq_ez_bg").children("img").css("width",Math.round($(window).height() * (1/fRatio)));
//还有这里的 Math.round($(window).height() * (1/fRatio)) 前面为什么要用窗口的高度，和 后面的为什么要用 1来除，，这又是为了什么？？？
...全文
请发表友善的回复…
发表回复
lxhbysn 2013-12-23
- 打赏
- 举报
等比放大缩小,不仅仅要改变图片的高和宽,
还要改变图片相对于窗口的上和左边的距离.
所以,要在初始化的时候,计算并记住左边距和上边距占整个窗体的百分比.
改变后,要按照百分比重新计算.
allali 2013-12-23
- 打赏
- 举报
不用img 直接在div设背景就不会拉伸了
缺水的孩子 2013-12-23
- 打赏
- 举报
谢谢各位的帮助，结贴给分！！
去圣西罗-为尤文喝彩 2013-12-23
- 打赏
- 举报
<body style="position:relative;z-index:0;">
<img style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;" data-src="1.jpeg" />
<!-- HTML5 延迟加载，不影响页面整体加载速度 -->
<div id="wrap" style="position:relative;z-index:1;background:transparent;">
<!-- 网页内容 -->
</div>
</body>
zhjdg 2013-12-22
- 打赏
- 举报
他先是按比例缩放，然后以图片中间为基准，移动图片
zhjdg 2013-12-22
- 打赏
- 举报
他不是一面的缩小。他还会移动图片的，所以是会显示一块，以图片中间为基准，不全的图片。
zhjdg 2013-12-22
- 打赏
- 举报
window 大小
width:1152
height:225
pic 大小
width:1024 iw
height:768 ih
if ($(window).width() > $(window).height()) {
if (iw > ih) {
var fRatio = iw/ih;
iw = window.width 1152
ih = window.width * (1/fRatio) 864 ==win宽*pic高\pic宽.
var newIh = ih = 864
if(newIh < $(window).height()) {
864<225 //window.height = 225
}
}
if(jqez.center){
应为ih>window.height
所以把图片移动中间去了。
}
}
桃园闲人 2013-12-22
- 打赏
- 举报
1. var fRatio = iw/ih; //这个是在求宽高比
2. $(window).height() * (1/fRatio)这个表达式我给你变换一下你就明白了，如下：
$(window).height() * (1/fRatio) = $(window).height() * (ih/iw)这一步就是按照原始比例做相应的放缩。
公式是这样的：已知新的高度为$(window).height()，设现在新的宽度为X，则有：
$(window).height() ： X = iw/ih；
x = $(window).height() * ih/iw
= $(window).height() * 1/fRatio
就是一个公式变形而已。
缺水的孩子 2013-12-22
- 打赏
- 举报
自己顶！！求高手帮助！
1．本书附源代码共计381个，其运行环境如下：
IE 5或更高版本
Mozilla Firefox 1.5.0.3或更高版本
服务器采用IIS5.1 或以上版本
数据库使用MS Access 2000以上
2．本书所附光盘实例代码：
第1章（\第1章）
查看1.2.htm中noscript显示效果的方法如下：
1．将该实例复制到C:\Inetpub\wwwroot下；
2．选择浏览器的“工具”－“安全”－“本地Intranet”－“自定义级别”－“活动脚本”中选用“禁用”单选框
3．在浏览器中输入下述地址：http://localhost/1.2.htm
• 1.1.htm 多段代码相互调用
• 1.2.htm <script>与js 1.3.htm使用的外部JavaScript文件
第2章（\第2章）
• 2.1.htm Infinity应用
• 2.2.htm NaN与isNaN()的用法
• 2.3.htm Infinity值的用法
• 2.4.htm 转义字符的使用
• 2.5.htm 引号的转义使用
• 2.6.htm Bolean值的使用
• 2.7.htm undefinded和null的使用
• 2.8.htm 变量的优先级
• 2.9.htm 数值型数据
• 2.10.htm 数组数据类型
• 2.11.htm 字符串型转换为逻辑型数据
• 2.12.htm toLowerCase()方法
• 2.13.htm 通过字符串调用toLowerCase()方法
• 2.14.htm 使用值的数据操作
• 2.15.htm 对数据的引用执行
• 2.16.htm 字符串的比较
第3章（\第3章）
• 3.1.htm 表达式示例
• 3.2.htm 加号运算符应用
• 3.3.htm 数值型数据与字符串连接
• 3.4.htm 数值型数据与字符串连接
• 3.5.htm 减号的取反功能
• 3.6.htm 对变量赋常量值
• 3.7.htm 对变量赋常量值
• 3.8.htm “==”与“=”的区别
• 3.9.htm 比较运算符的区别
• 3.10.htm “++”运算符后置应用
• 3.11.htm “++”运算符前置应用
• 3.12.htm 逗号表达式的连接应用
• 3.13.htm 逗号表达式的连接应用
• 3.14.htm typeof运算符的使用
• 3.15.htm new运算符的应用
• 3.16.htm delete运算符的应用
• 3.17.htm 用()改变运算优先级
• 3.18.htm 运算符结合性
第4章（\第4章）
• 4.1.htm 条件语句内单行代码的写法
• 4.2.htm 变量赋初值
• 4.3.htm if…else举例
• 4.4.htm 用else进行更多选择
• 4.5.htm if语句的嵌套之一
• 4.6.htm if语句的嵌套之二
• 4.7.htm switch语句
• 4.8.htm while循环语句
• 4.9.htm do-while循环语句
• 4.10.htm for循环语句
• 4.11.htm for循环语句之二
• 4.12.htm continue语句
第5章（\第5章）
• 5.1.htm 函数定义
• 5.2.htm 无返回值的函数
• 5.3.htm 有返回值的函数及其调用
• 5.4.htm 直接使用函数返回值
• 5.5.htm 直接使用函数返回值
• 5.6.htm 直接使用函数返回值
• 5.7.htm 参数变量可变的函数
• 5.8.htm 动态函数
• 5.9.htm encodeURI方法
• 5.10.htm decodeURI方法
• 5.11.htm decodeURI方法
• 5.12.htm decodeURI方法
• 5.13.htm isNaN方法
• 5.14.htm escape方法
• 5.15.htm unescape方法
第6章（\第6章）
• 6.1.htm 对象创建与属性调用
• 6.4.htm this关键字的使用
• 6.5.htm 数组的length属性
• 6.6.htm 数组元素遍历
• 6.7.htm 数组元素遍历
• 6.8.htm 数组元素遍历之二
• 6.9.htm 用构造函数来创建数组
• 6.10.htm 用构造函数来创建数组之二
• 6.11.htm join方法
• 6.12.htm revrse方法
• 6.13.htm sort方法
• 6.14.htm alice方法
• 6.15.htm splice方法
• 6.16.htm Object对象
• 6.17.htm anchor方法
• 6.18.htm big方法
• 6.19.htm fontcolor方法
• 6.20.htm 字符串搜索
• 6.21.htm link方法
• 6.22.htm 字符串转换与匹配
• 6.23.htm Date对象的方法
• 6.24.htm toString方法
• 6.25.htm with语句
• 6.26.htm for…in语句调用对象属性
• 6.25.htm for…in语句调用属性值
第7章（\第7章）
• 7.1.htm 字符串合并
• 7.2.htm 字符串合并
• 7.3.htm 字符串中使用转义字符
• 7.4.htm document.write()与alert()
• 7.5.htm unescape()函数的使用
• 7.6.htm escape()函数的使用
• 7.7.htm 进制转换
• 7.8.htm isNaN()
• 7.9.htm 进制转换
• 7.10.htm 产生1~6间的随机数
• 7.11.htm Math对象的with结构
• 7.11.htm toExponential()方法和toFixed()方法
• 7.13.htm toPrecision()方法使用示例
• 7.14.htm toString()方法使用示例
第8章（\第8章）
• 8.1.htm 创建正则表达式
• 8.2.htm 转义字符中的“”
• 8.3.htm exec()方法应用
• 8.4.htm RegExp对象的使用
• 8.5.htm match方法的使用
• 8.6.htm search方法
• 8.7.htm replace方法的使用
• 8.8.htm split方法
• 8.9.htm 字符匹配
• 8.10.htm 圆点（.章）元字符
• 8.11.htm 行首匹配字符^
• 8.12.htm 行尾匹配字符$
• 8.13.htm 元字符\b
• 8.14.htm replace方法的使用
第9章（\第9章）
• 9.1.htm 超级链接上的事件绑定
• 9.2.htm HTML 事件绑定
• 9.3.htm 非标准事件绑定
• 9.4.htm 简单的JavaScript事件绑定
• 9.5.htm 简单的JavaScript事件绑定
• 9.6.htm 事件处理器的作用域
• 9.7.htm 事件处理器的作用域之二
• 9.8.htm 事件处理器的返回值
• 9.9.htm 自动触发事件
• 9.9.htm 直接在表单上调用事件
• 9.11.htm attachEvent()方法
• 9.12.htm 事件流测试
• 9.13.htm DOM2 事件模型基本语法
• 9.14.htm DOM2 鼠标事件
• 9.15.htm 取消默认动作之一
• 9.16.htm 取消默认动作之二
• 9.17.htm 创建事件
第10章（\第10章）
• 10.1.htm 鼠标事件处理
• 10.2.htm 页面预览
• 10.3.htm 图像切换
• 10.4.htm 接收键盘输入
• 10.5.htm 用鼠标点亮文本
• 10.6.htm 图片跟随鼠标
• 10.7.htm 文字跟随鼠标
• 10.8.htm 星星跟随鼠标
• 10.9.htm 鼠标感应 弹出警告框
• 10.10.htm 鼠标感应 渐显图片
• 10.11.htm 禁用鼠标右键
第11章（\第11章）
• 11.1.htm 省略window的alert()方法
• 11.2.htm 未省略window的alert()方法
• 11.3.htm 未省略window的document.write()方法
• 11.4.htm Document对象部分属性与方法的使用
• 11.5.htm HTML文档属性属性
• 11.6.htm 同时使用name和id
• 11.7.htm 事件控制器的例子
• 11.8.htm JavaScript实现事件控制器
• 11.9.htm 元素属性综合应用
• 11.10.htm 动态修改表单元素内容
第12章（\第12章）
• 12.1.htm Document树的简单例子
• 12.2.htm getElementById()方法
• 12.3.htm DOM结点属性
• 12.4.htm 文档树检测
• 12.5.htm 结点插入与追加
• 12.6.htm 结点复制
• 12.7.htm 结点删除与替换
• 12.8.htm 处理文本结点的方法
• 12.9.htm 处理属性的方法
• 12.10.htm HTMLElement对象
• 12.11.htm DOM遍历API
• 12.12.htm DOM Range API
• 12.13.htm 读取HTML元素内容
• 12.14.htm 修改HTML元素内容
• 12.15.htm innerText、outerText、outerHTML属性
• 12.16.htm document.all[]
第13章（\第13章）
• 13.1.htm HTML对象模型
• 13.2.htm DHTML对象模型
• 13.3.htm DHTML对象模型方法显示和修改网页文字内容
• 13.4.htm DHTML对象模型方法新增和删除表格行内容
• 13.5.htm W3C对象模型方法显示和修改网页内容
• 13.6.htm W3C对象模型方法显示和修改表格内容
• 13.7.htm “相对位置”定位
• 13.8.htm “绝对位置”定位
• 13.9.htm z-index属性
• 13.10.htm z-index属性之二
• layerlib.js 跨浏览器DHTML库
• 13.12.htm 跨浏览器DHTML库的使用
第14章（\第14章）
• 14.1.htm confirm()方法用作判断条件
• 14.2.htm alert()方法与confirm()方法的使用
• 14.3.htm prompt()方法的使用
• 14.4.htm window.open()方法
• 14.5.htm 用链接和按钮实现窗口打开
• 14.6.htm 窗口的打开和关闭
• 14.7.htm 安全关闭窗口
• 14.8.htm 窗口特征属性综合举例
• 14.9.htm 一个窗口写入的简单例子
• 14.10.htm 动态写入HTML代码
• 14.11.htm 窗口写入的应用示例
• 14.12.htm DOM窗口交互
• 14.13.htm 窗口方法测试
• 14.14.htm 用按钮载入页面
• 14.14.htm status属性
• 14.16.htm defaultStatus属性
• 14.17.htm 滚动的状态栏
• 14.18.htm 超时设定
• 14.19.htm onload事件
• 14.20.htm 模式窗口
• 14.21.htm 无模式窗口
• 14.22.htm 窗口应用举例
• 14.23.htm 全屏窗口
第15章（\第15章）
代码说明：本章部分代码使用了第10章、第19章几个文件，如果不能正常显示，则可能这些文件位置已改变。
• 15.1.htm 简单框架
• frames.htm 网页框架
• moreframes.htm 更多框架
• moreframes.htm 框架关联显示
• 15.5.htm 简单的框架网页
• 15.6.htm 内联框架
• 15.7.htm 简单的框架嵌套
• 15.8.htm 框架嵌套
• 15.9.htm 交叉框架通信
• input.htm 交叉框架通信的输入部分
• output.htm 交叉框架通信的输出部分
• 15.12.htm 嵌套框架交叉通信
• top.htm 嵌套框架交叉通信的上部框架
• bottom.htm 嵌套框架交叉通信的底部框架
• minput.htm 嵌套框架交叉通信的输入部分
• moutput.htm 嵌套框架交叉通信的输出部分
• stateframes.htm 状态框架集
• stateframe.htm 状态框架
• mainframe.htm 主框架
• mainframe2.htm 主框架之二
第16章（\第16章）
• 16.1.htm 文档颜色属性应用
• 16.2.htm lastModified
• 16.3.htm lastModified的返回值
• 16.4.htm document.location
• 16.6.htm document.location的详细属性
• 16.6.htm 验证document.referrer
• 16.7.htm 验证document.referrer
• 16.8.htm document.write()与document.writeln()
• 16.9.htm 字符串连接输出
• 16.10.htm document.close()和document.open()
• 16.11.htm document.links[].href
• 16.12.htm elements[]
• 16.13.htm images[]
• 16.14.htm document.getElementById()
• 16.15.htm document.createElement()
• 16.16.htm 设置表格属性
• 16.17.htm 显示表格属性
• 16.18.htm 操作表格元素
• 16.19.htm 插入和删除表元
• 16.20.htm 改变
的内容
• 16.21.htm 改变页面样式
• blue.css 16.21.htm用到的样式文件
• red.css 16.21.htm用到的样式文件
• green.css 16.21.htm用到的样式文件
第17章（\第17章）
• 17.1.htm Form对象测试
• 17.2.htm 基本按钮
• 17.3.htm button按钮
• 17.4.htm 文本域
• 17.5.htm 文本区
• 17.6.htm 限制输入长度的文本区
• 17.7.htm 限制输入长度的文本区之二
• 17.8.htm 复选框与单选按钮
• 17.9.htm 验证输入内容是否为空
• 17.10.htm 验证输入内容是否为空
• 17.11.htm 混合表单验证
• 17.12.htm 按键屏蔽
• 17.13.htm 屏蔽表单域
• 17.14.htm 动态表单
第18章（\第18章）
• 18.1.htm 复选框
• 18.2.htm 单选按钮
• 18.3.htm 复选框与单选按钮的组合使用
• 18.4.htm 使用elements[]数组
• 18.5.htm 选择控件
• 18.6.htm 多项选择控件
• 18.7.htm 级联选择控件
第19章（\第19章）
• 19.1.htm 友情链接
• 19.2.htm 需要确认的友情链接
• 19.3.htm 渐显效果的下拉菜单
• 19.4.htm 模拟系统菜单
• 19.5.htm 图片显示窗口
• 19.6.htm 远程控制菜单
• 19.7.htm 滑动菜单
• 19.8.htm 左键弹出式菜单
• 19.9.htm 浮动菜单
• 19.10.htm 导航式菜单
第20章（\第20章）
• 20.1.htm 显示浏览器名称与版本号
• 20.2.htm 显示浏览器名称（改进章）
• 20.3.htm JavaScript支持检测1
• 20.4.htm JavaScript支持检测2
• 20.5.htm JavaScript对象检测
• 20.6.htm Screen对象
• 20.7.htm 获取浏览器窗口大小
• 20.8.htm 字号随浏览器窗口大小而改变
• 20.9.htm 对代码20.8的改写
• 20.10.htm 在网页中有选择地显示图片
• 20.11.htm 客户端性能检测
• 20.12.htm 浏览器按键模拟
• 20.13.htm 修改Mozilla用户主页
• 20.14.htm 修改IE用户主页
第21章（\第21章）
• 21.1.htm 编码与解码
• 21.2.htm Cookie值被覆盖
• 21.3.htm Cookie分析
• 21.4.htm 用Cookie保存定制样式
• 21.5.htm DHTML行为
第22章（\第22章）
• 22.1.htm 通过单击按钮来改变图像
• 22.2.htm 随机显示不同图像
• 22.3.htm 结构化图形控件
• 22.4.htm 图像定位示例
• 22.5.htm 在IE中拖动图像
• 22.6.htm 按钮翻转示例
• 22.7.htm 跟随屏幕移动的图片
• 22.8.htm 多幅图片滚动显示
• 22.9.htm 图片的左右循环飘动
• 22.10.htm 图片的渐隐渐显
• 22.11.htm 不停闪烁的图片
• 22.12.htm 图片倒映
第23章（\第23章）
• 23.1.htm 简单过渡
• layerlib.js JavaScript外部文件
• 23.3.htm 目标翻转
• 23.4.htm 运动图像
• 23.5.htm 随机图像
• 23.6.htm 动画效果
• 23.7.htm Sequencer控件
• 23.8.htm Path控件
• 23.9.htm 永远居中的背景图片
• 23.10.htm 随机显示的背景图片
• 23.11.htm 垂直滚动公告板
• 23.12.htm 类似Flash的字幕效果
• 23.13.htm 地震效果
第24章（\第24章）
• MyApplet.txt 简单的Java Applet源程序
• 24.2.htm 在JavaScript中访问Java Applet
• 24.3.htm 简单的Flash插件
• 24.4.htm mimeTypes[]数组
• 24.5.htm 使用mimeTypes[]检测支持的媒体类型
• 24.6.htm 使用navigator.plugins[][]列举所有Flash MIME类型
• 24.7.htm 列举plugins[]数组的内容
• 24.8.htm 简单的Flash播放控制器
• 24.9.htm ActiveX控件示例
• 24.10.htm 使代码兼容多种浏览器
• 24.11.htm Flash 播放控制器(ActiveX)
第25章（\第25章）
• 25.1.htm 单向通信中的Image
• 25.2.htm JavaScript向服务器发送RPC
• 25.3.htm 动态内容
• 25.4.htm 中的单词拼写检查
• 25.5.htm 内联框架
第26章（\第26章）
1．查看书中图26.9的效果的方法：
用记事本打开26.5.xml，找到第二行，内容如下：
将两端的去掉并保存该文档后，用IE打开，就可看到图26.9所示的效果。
2．查看书中图26.10的效果的方法：
用记事本打开26.5.xml，找到第3行，内容如下：
将两端的去掉并保存该文档后，用IE打开，就可看到图26.9所示的效果。
3．要查看书中图26.11的效果，须连接Internet。
• 26.1.xml XML文档的例子
• 26.2.xml 包含DTD及其实例的XML文档
• 26.3.xml 要转换的XML文档
• test.xsl 转换XML文档的模板文件
• 26.5.xml 更复杂的要转换的XML文档
• staff.xsl XSL样式表
• staff.css CSS样式表
• 26.8.xml 使用了MathML的XML文档
• 26.9.htm 显示XML文档根结点
• 26.10.htm 使用Jscript与DOM直接操作XML
• 26.11.xml 使用Mozilla直接操作XML
• 26.12.js 使用Mozilla直接操作XML用到的js文件
• 26.13.htm IE XML数据岛应用
• 26.14.htm IE XML数据岛
• 26.15.rss 简单的rss文件
• 26.16.htm 简单的rss阅读器
第28章（\第28章）
• 28.1.htm 显示当前时间
• 28.2.htm 显示当前日期和星期
• 28.3.htm 显示日期、时间和星期
• 28.4.htm 分时段问候
• 28.5.htm 以数字图片来显示时间
• 28.6.htm 显示世界不同地区的当前时间
• 28.7.htm 总是悬浮的时钟
• 28.8.htm 简单的加减乘除运算
• 28.9.htm 能进行四则混合运算的计算器
• 28.10.htm 在表单中显示打字效果
• 28.11.htm 随页面刷新更换页面背景
• 28.12.htm 随页面刷新显示不同图片
第29章（\第29章）
• 29.1.htm 汉诺塔问题求解
• 29.2.htm 位置固定的对联广告
• 29.3.htm 随页面滚动的对联广告
• 29.4.htm 循环滚动的多幅广告
• css.css 代码29.4用到的样式文件
• 29.6.htm 用JavaScript实现级联选择
• ajax_server.asp 使用ASP访问demo数据表
• ajax.htm 使用ajax实现级联选择
第30章（\第30章）
代码说明：本章实现了一个ASP留言板程序，程序需要在IIS环境下运行。
• index.asp 留言板主程序
• guestbook.mdb 留言板数据库程序
• images\ 留言板使用的图像文件目录
