上篇实例为图片浏览器是从小说阅读器直接将图片分页替换文本分页，还是双页显示。页面小阅读比较吃力，本篇拟改动几行代码，用全屏显示，看看效果如何。

     #pgnumber{position:fixed;font-size:12px;left:200px;height:25px;top:10px;width:200px;z-index:1;}  原top改成10px，也就是从页脚改到页眉，可以动态根据屏幕大小改动，为了简单，这里只做静态改动。

图片分页用以下代码,上篇的网页文件有（onload="getImages()")

function getImages(){
var i,pstr=""
var imgStr="<img width=‘600px‘ height=‘800px‘ src=http://www.mamicode.com/pages/"; //改动页面分辨率以及图片所在的目录（这里目录为pages）；
for (i=0;i<603;i++){ //看一下目录有多少图片，把这些信息加在一段文字pstr里。
pstr+=imgStr+(i+1001)+".jpg><pn>"; //图片按先后顺序编号（这里图片不超过1000页，要加上1000以保证系统排序正确）。
}
pageStr=pstr.split("<pn>");// 把那段文字分页（603页）
  numberOfPages=pageStr.length+1;//告诉阅读器有多少页。

} 

function loadF(){ //加载分页
$(‘#book‘).turn({
acceleration: true,
pages: numberOfPages,
elevation: 30,
display:‘single‘, //阅读器默认双页显示，单页显示就要加上这句。
gradients: !$.isTouch, 
when: {
  turning: function(e, page, view) {
  var range = $(this).turn(‘range‘, page);
for (page = range[0]; page<=range[1]; page++) 
addPage(page, $(this));
},
turned: function(e, page) {
$(‘#pgnumber ss:eq(1)‘).text(page); //原来在页脚的页码和章节栏，位置换成页眉了。
}
}
});
}

理论上图片页数不限，放在一个找得到的文件夹（苹果浏览器不支持中文目录）里，如果大于1000页，就要加10000，因为1和0001在文件系统里排序是不一样的。

从加载函数loadF()可以看到每个页面信息很短，阅读器每次加载6页，然后根据浏览情况动态更改不超过6页。所以系统消耗资源不大，翻页效果不错。

运行效果：

图一：页眉的菜单栏（蓝色字体）看不清，鼠标移到哪里可以有动作。

图二：列表框top可以加到30px（这里为10px），鼠标点一下菜单名“章节”和要浏览的标题如“11.1 正则表达式的定义”

图三：把菜单栏放在页眉，多数时候都可见，免去增加代码，可见菜单和工具栏编排灵活（上下左右任何地方）。

注：js中锚定义也是很方便的，而开篇到现在都没有使用，因为文本菜单有同样的效果，理论上可以在任何地方安放，而且很容易定位和动态加载。

实际使用中锚定义和定位与下拉菜单（select->option）情况差不多，使用非常方便，但资源开销和动态更改不便。