最近看Google图书，令人感到困惑的无非是无法自由的地下载其图片。以至于网上充斥着Google图书下载器。查看源代码，着实让人困惑不已。还好有IE Developer Tools，才大致将其UI结构搞的一知半解。至于图片的下载这倒是需要在仔细研究下。顺便做了一个Demo，废话不多说直接开始贴代码了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#ToolBar{ border:solid 1px #000;}
#ToolBar span{ padding:5px;}
#ViewContent{ background-repeat:no-repeat; background-position:top center;}
#pageContiner{ width:575px; height:65536px;}
#cover{position:absolute; top:50; left:30; width:575px; height:605px;CURSOR: url('http://books.google.cn/googlebooks/images/openhand.cur'), default;}
</style>
</head>
<body>
<div id="ToolBar">
<span>Zoom+</span><span>Zoom-</span><span>SinglePage</span><span>DoublePage</span><span>FullPage</span><span id="scrollpos"></span><span id="cur_pos"></span>
</div>
<div id="ViewContent" unselectable="on" style="overflow:auto; height:618px" onscroll="showScrollPos()">
<div id="cover" unselectable="on">
</div>
<div id="pageContiner">
<div style="background-image:url(http://books.google.cn/books?id=wrPnmmNARo8C&pg=PP1&img=1&zoom=3&hl=zh-CN&sig=ACfU3U2EN5ATqWNa9DuHnl7mVRytUu0nLA); 575px; height:734px;background-repeat:no-repeat;"></div>
<div style="575px; border:1px #f1f1f1 solid; background-color:#CCFFFF; margin:5px auto;" unselectable="on">该书部分内容不在预览之内。</div>
<div style="background-image:url(http://books.google.cn/books?id=wrPnmmNARo8C&pg=PP1&img=1&zoom=3&hl=zh-CN&sig=ACfU3U2EN5ATqWNa9DuHnl7mVRytUu0nLA); 575px; height:735px;background-repeat:no-repeat;"></div>
</div>
</div>
<script type="text/javascript">
var isDown=false;
var curposY=0;
function $(str){return typeof(str)=="string"?document.getElementById(str):str;}
function $E(strElement,strEvent,oFunction){if(window.addEventListener) $(strElement).addEventListener(strEvent,oFunction,false);else $(strElement).attachEvent("on"+strEvent,oFunction);}
function showScrollPos(){$("scrollpos").innerHTML=$("ViewContent").scrollTop;}
function changeCursor(bopen){$("cover").style.cursor=(bopen)?"url('http://books.google.cn/googlebooks/images/openhand.cur'), default":"url('http://books.google.cn/googlebooks/images/closedhand.cur'), default";}
function InitBook(){
$E("cover","mousedown",covMsDown);
$E("cover","mouseup",covMsUp);
$E("cover","mousemove",covMsMove);
$E("cover","mouseout",covMsOut);
}
function covMsDown(){
isDown=true;
curposY=event.clientY;
changeCursor(false);
}
function covMsUp(){
isDown=false;
changeCursor(true);
}
function covMsOut(){
isDown=false;
changeCursor(true);
}
function covMsMove(){
if(isDown){
len=Math.abs(event.clientY-curposY);
$("cur_pos").innerHTML=event.clientY;
if(event.clientY>curposY)
$("ViewContent").scrollTop-=len;
else
$("ViewContent").scrollTop+=len;
curposY=event.clientY;
}
}
InitBook();
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#ToolBar{ border:solid 1px #000;}
#ToolBar span{ padding:5px;}
#ViewContent{ background-repeat:no-repeat; background-position:top center;}
#pageContiner{ width:575px; height:65536px;}
#cover{position:absolute; top:50; left:30; width:575px; height:605px;CURSOR: url('http://books.google.cn/googlebooks/images/openhand.cur'), default;}
</style>
</head>
<body>
<div id="ToolBar">
<span>Zoom+</span><span>Zoom-</span><span>SinglePage</span><span>DoublePage</span><span>FullPage</span><span id="scrollpos"></span><span id="cur_pos"></span>
</div>
<div id="ViewContent" unselectable="on" style="overflow:auto; height:618px" onscroll="showScrollPos()">
<div id="cover" unselectable="on">
</div>
<div id="pageContiner">
<div style="background-image:url(http://books.google.cn/books?id=wrPnmmNARo8C&pg=PP1&img=1&zoom=3&hl=zh-CN&sig=ACfU3U2EN5ATqWNa9DuHnl7mVRytUu0nLA); 575px; height:734px;background-repeat:no-repeat;"></div>
<div style="575px; border:1px #f1f1f1 solid; background-color:#CCFFFF; margin:5px auto;" unselectable="on">该书部分内容不在预览之内。</div>
<div style="background-image:url(http://books.google.cn/books?id=wrPnmmNARo8C&pg=PP1&img=1&zoom=3&hl=zh-CN&sig=ACfU3U2EN5ATqWNa9DuHnl7mVRytUu0nLA); 575px; height:735px;background-repeat:no-repeat;"></div>
</div>
</div>
<script type="text/javascript">
var isDown=false;
var curposY=0;
function $(str){return typeof(str)=="string"?document.getElementById(str):str;}
function $E(strElement,strEvent,oFunction){if(window.addEventListener) $(strElement).addEventListener(strEvent,oFunction,false);else $(strElement).attachEvent("on"+strEvent,oFunction);}
function showScrollPos(){$("scrollpos").innerHTML=$("ViewContent").scrollTop;}
function changeCursor(bopen){$("cover").style.cursor=(bopen)?"url('http://books.google.cn/googlebooks/images/openhand.cur'), default":"url('http://books.google.cn/googlebooks/images/closedhand.cur'), default";}
function InitBook(){
$E("cover","mousedown",covMsDown);
$E("cover","mouseup",covMsUp);
$E("cover","mousemove",covMsMove);
$E("cover","mouseout",covMsOut);
}
function covMsDown(){
isDown=true;
curposY=event.clientY;
changeCursor(false);
}
function covMsUp(){
isDown=false;
changeCursor(true);
}
function covMsOut(){
isDown=false;
changeCursor(true);
}
function covMsMove(){
if(isDown){
len=Math.abs(event.clientY-curposY);
$("cur_pos").innerHTML=event.clientY;
if(event.clientY>curposY)
$("ViewContent").scrollTop-=len;
else
$("ViewContent").scrollTop+=len;
curposY=event.clientY;
}
}
InitBook();
</script>
</body>
</html>
演示地址：