最近看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); width:575px; height:734px;background-repeat:no-repeat;" ></ div >
< div style ="width: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); width: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); width:575px; height:734px;background-repeat:no-repeat;" ></ div >
< div style ="width: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); width: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 >
演示地址:
转载于:https://www.cnblogs.com/netwenchao/archive/2009/11/26/1611390.html