js翻书功能

 
 

  
  <
  
  html 
  
  xmlns
  
  =
  
  "http://www.w3.org/1999/xhtml"
  
  >
 
 
 
 

  
  <
  
  head
  
  >
 
 
 
 

  
  <
  
  meta 
  
  http
  
  -
  
  equiv
  
  =
  
  "Content-Type" 
  
  content
  
  =
  
  "text/html; charset=gb2312" 
  
  />
 
 
 
 

  
  <
  
  title
  
  >
  
  JS
  
  实现图片翻书效果
  
  -
  
  懒人图库
  
  <
  
  /title>
 
 
 
 

  
  <
  
  META 
  
  http
  
  -
  
  equiv
  
  =
  
  imagetoolbar 
  
  content
  
  =
  
  no
  
  >
 
 
 
 

  
  <
  
  STYLE 
  
  type
  
  =
  
  text
  
  /
  
  css
  
  >
 
 
 
 

  
  #
  
  center 
  
  {
 
 
 
 
	
  
  LEFT
  
  : 
  
  50
  
  %
  
  ; 
  
  POSITION
  
  : 
  
  absolute
  
  ; 
  
  TOP
  
  : 
  
  50
  
  %
 
 
 
 

  
  }
 
 
 
 

  
  #
  
  DHTMLBOOK 
  
  {
 
 
 
 
	
  
  BACKGROUND
  
  : 
  
  #
  
  000
  
  ; 
  
  LEFT
  
  : 
  
  -
  
  210
  
  px
  
  ; 
  
  VISIBILITY
  
  : 
  
  hidden
  
  ; 
  
  WIDTH
  
  : 
  
  420
  
  px
  
  ; 
  
  POSITION
  
  : 
  
  relative
  
  ; 
  
  TOP
  
  : 
  
  -
  
  160
  
  px
  
  ; 
  
  HEIGHT
  
  : 
  
  320
  
  px
 
 
 
 

  
  }
 
 
 
 

  
  #
  
  TXTBOX 
  
  {
 
 
 
 
	
  
  FONT
  
  -
  
  SIZE
  
  : 
  
  0.8
  
  em
  
  ; 
  
  WIDTH
  
  : 
  
  410
  
  px
  
  ; 
  
  COLOR
  
  : 
  
  #
  
  aba193
  
  ; 
  
  FONT
  
  -
  
  FAMILY
  
  : 
  
  verdana
  
  ; 
  
  POSITION
  
  : 
  
  absolute
  
  ; 
  
  TOP
  
  : 
  
  320
  
  px
  
  ; 
  
  TEXT
  
  -
  
  ALIGN
  
  : 
  
  center
 
 
 
 

  
  }
 
 
 
 

  
  .
  
  page 
  
  {
 
 
 
 
	
  
  OVERFLOW
  
  : 
  
  hidden
  
  ; 
  
  BORDER
  
  -
  
  LEFT
  
  : 
  
  #
  
  000000 
  
  1
  
  px 
  
  solid
  
  ; 
  
  WIDTH
  
  : 
  
  50
  
  %
  
  ; 
  
  CURSOR
  
  : 
  
  pointer
  
  ; 
  
  POSITION
  
  : 
  
  absolute
  
  ; 
  
  HEIGHT
  
  : 
  
  100
  
  %
 
 
 
 

  
  }
 
 
 
 

  
  .
  
  right 
  
  {
 
 
 
 
	
  
  BORDER
  
  -
  
  RIGHT
  
  : 
  
  #
  
  000000 
  
  1
  
  px 
  
  solid
  
  ; 
  
  LEFT
  
  : 
  
  50
  
  %
 
 
 
 

  
  }
 
 
 
 

  
  .
  
  turn 
  
  {
 
 
 
 
	
  
  BACKGROUND
  
  : 
  
  #
  
  000000
 
 
 
 

  
  }
 
 
 
 

  
  .
  
  img 
  
  {
 
 
 
 
	
  
  WIDTH
  
  : 
  
  200
  
  %
  
  ; 
  
  POSITION
  
  : 
  
  absolute
  
  ; 
  
  HEIGHT
  
  : 
  
  100
  
  %
 
 
 
 

  
  }
 
 
 
 

  
  <
  
  /STYLE>
 
 
 
 

  
  

 
 
 
 

  
  <
  
  SCRIPT 
  
  type
  
  =
  
  text
  
  /
  
  javascript
  
  >
  
  <!--
 
 
 
 

  
  

 
 
 
 

  
  document
  
  .
  
  onselectstart 
  
  = 
  
  function 
  
  () 
  
  { 
  
  return 
  
  false
  
  ; 
  
  }
 
 
 
 

  
  

 
 
 
 

  
  var 
  
  nI  
  
  = 
  
  0
  
  ;
 
 
 
 

  
  var 
  
  kI  
  
  = 
  
  0
  
  ;
 
 
 
 

  
  var 
  
  run 
  
  = 
  
  false
  
  ;
 
 
 
 

  
  

 
 
 
 

  
  function 
  
  setOpacity
  
  (
  
  obj
  
  ,
  
  o
  
  ) 
  
  {
 
 
 
 
	
  
  if 
  
  (
  
  o
  
  <
  
  0
  
  ) 
  
  o
  
  =
  
  0
  
  ; 
  
  else 
  
  if 
  
  (
  
  o
  
  >
  
  100
  
  ) 
  
  o 
  
  = 
  
  100
  
  ;
 
 
 
 
	
  
  if 
  
  (
  
  obj
  
  .
  
  filters
  
  )
  
  obj
  
  .
  
  filters
  
  .
  
  alpha
  
  .
  
  opacity
  
  =
  
  o
  
  ; 
  
  else 
  
  obj
  
  .
  
  style
  
  .
  
  opacity 
  
  = 
  
  o
  
  /
  
  100
  
  ;
 
 
 
 

  
  }
 
 
 
 

  
  function 
  
  TPR__
  
  (
  
  p
  
  ) 
  
  {
 
 
 
 
	
  
  P1
  
  .
  
  style
  
  .
  
  left  
  
  = 
  
  50
  
  -
  
  (
  
  2.5
  
  *
  
  p
  
  )
  
  +
  
  "%"
  
  ;
 
 
 
 
	
  
  P1
  
  .
  
  style
  
  .
  
  width 
  
  = 
  
  (
  
  2.5
  
  *
  
  p
  
  )
  
  +
  
  "%"
  
  ;
 
 
 
 
	
  
  setOpacity
  
  (
  
  P1i
  
  , 
  
  .
  
  5
  
  *
  
  p
  
  *
  
  p
  
  );
 
 
 
 
	
  
  if 
  
  (
  
  p 
  
  == 
  
  20
  
  ) 
  
  run 
  
  = 
  
  false
  
  ;
 
 
 
 

  
  }
 
 
 
 

  
  function 
  
  TPR_
  
  (
  
  p
  
  ) 
  
  {
 
 
 
 
	
  
  P2
  
  .
  
  style
  
  .
  
  width 
  
  = 
  
  50
  
  -
  
  (
  
  2.5
  
  *
  
  p
  
  )
  
  +
  
  "%"
  
  ;
 
 
 
 
	
  
  setOpacity
  
  (
  
  P2i
  
  , 
  
  100
  
  -
  
  .
  
  5
  
  *
  
  (
  
  p
  
  *
  
  p
  
  ));
 
 
 
 
	
  
  if 
  
  (
  
  p 
  
  == 
  
  20
  
  ) 
  
  {
 
 
 
 
		
  
  P2i
  
  .
  
  src 
  
  = 
  
  IMGSRC
  
  [
  
  kI
  
  ].
  
  src
  
  ;
 
 
 
 
		
  
  setOpacity
  
  (
  
  P2i
  
  , 
  
  100
  
  );
 
 
 
 
		
  
  P2
  
  .
  
  style
  
  .
  
  width 
  
  = 
  
  "50%"
  
  ;
 
 
 
 
		
  
  for
  
  (
  
  var 
  
  i
  
  =
  
  1
  
  ; 
  
  i
  
  <=
  
  20
  
  ; 
  
  i
  
  ++
  
  ) 
  
  setTimeout
  
  (
  
  "TPR__("
  
  +
  
  i
  
  +
  
  ")"
  
  , 
  
  i
  
  *
  
  32
  
  );
 
 
 
 
	
  
  }
 
 
 
 

  
  }
 
 
 
 

  
  function 
  
  TPR
  
  () 
  
  {
 
 
 
 
	
  
  if 
  
  (
  
  !
  
  run
  
  ) 
  
  {
 
 
 
 
		
  
  run 
  
  = 
  
  true
  
  ;
 
 
 
 
		
  
  P01i
  
  .
  
  src 
  
  = 
  
  IMGSRC
  
  [
  
  kI
  
  ].
  
  src
  
  ;
 
 
 
 
		
  
  P1
  
  .
  
  style
  
  .
  
  width 
  
  = 
  
  0
  
  ;
 
 
 
 
		
  
  kI
  
  ++
  
  ;
 
 
 
 
		
  
  if 
  
  (
  
  kI
  
  >=
  
  nI
  
  ) 
  
  kI 
  
  = 
  
  0
  
  ;
 
 
 
 
		
  
  titLe
  
  (
  
  kI
  
  );
 
 
 
 
		
  
  P02i
  
  .
  
  src 
  
  = 
  
  IMGSRC
  
  [
  
  kI
  
  ].
  
  src
  
  ;
 
 
 
 
		
  
  P1i
  
  .
  
  src  
  
  = 
  
  IMGSRC
  
  [
  
  kI
  
  ].
  
  src
  
  ;
 
 
 
 
		
  
  for 
  
  (
  
  var 
  
  i
  
  =
  
  1
  
  ; 
  
  i
  
  <=
  
  20
  
  ; 
  
  i
  
  ++
  
  ) 
  
  setTimeout
  
  (
  
  "TPR_("
  
  +
  
  i
  
  +
  
  ")"
  
  , 
  
  i
  
  *
  
  32
  
  );
 
 
 
 
	
  
  } 
  
  else 
  
  setTimeout
  
  (
  
  "TPR()"
  
  , 
  
  100
  
  );
 
 
 
 

  
  }
 
 
 
 

  
  

 
 
 
 

  
  function 
  
  TPL__
  
  (
  
  p
  
  ) 
  
  {
 
 
 
 
	
  
  P2
  
  .
  
  style
  
  .
  
  width 
  
  = 
  
  (
  
  2.5
  
  *
  
  p
  
  )
  
  +
  
  "%"
  
  ;
 
 
 
 
	
  
  setOpacity
  
  (
  
  P2i
  
  , 
  
  .
  
  5
  
  *
  
  p
  
  *
  
  p
  
  );
 
 
 
 
	
  
  if 
  
  (
  
  p 
  
  == 
  
  20
  
  ) 
  
  run 
  
  = 
  
  false
  
  ;
 
 
 
 

  
  }
 
 
 
 

  
  function 
  
  TPL_
  
  (
  
  p
  
  ) 
  
  {
 
 
 
 
	
  
  P1
  
  .
  
  style
  
  .
  
  left  
  
  = 
  
  (
  
  2.5
  
  *
  
  p
  
  )
  
  +
  
  "%"
  
  ;
 
 
 
 
	
  
  P1
  
  .
  
  style
  
  .
  
  width 
  
  = 
  
  40
  
  +
  
  (
  
  10
  
  -
  
  2.5
  
  *
  
  p
  
  )
  
  +
  
  "%"
  
  ;
 
 
 
 
	
  
  setOpacity
  
  (
  
  P1i
  
  , 
  
  100
  
  -
  
  .
  
  5
  
  *
  
  (
  
  p
  
  *
  
  p
  
  ));
 
 
 
 
	
  
  if 
  
  (
  
  p 
  
  == 
  
  20
  
  ) 
  
  {
 
 
 
 
		
  
  P1i
  
  .
  
  src 
  
  = 
  
  IMGSRC
  
  [
  
  kI
  
  ].
  
  src
  
  ;
 
 
 
 
		
  
  setOpacity
  
  (
  
  P1i
  
  , 
  
  100
  
  );
 
 
 
 
		
  
  P1
  
  .
  
  style
  
  .
  
  left  
  
  = 
  
  0
  
  ;
 
 
 
 
		
  
  P1
  
  .
  
  style
  
  .
  
  width 
  
  = 
  
  "50%"
  
  ;
 
 
 
 
		
  
  for
  
  (
  
  var 
  
  i
  
  =
  
  1
  
  ; 
  
  i
  
  <=
  
  20
  
  ; 
  
  i
  
  ++
  
  ) 
  
  setTimeout
  
  (
  
  "TPL__("
  
  +
  
  i
  
  +
  
  ")"
  
  , 
  
  i
  
  *
  
  32
  
  );
 
 
 
 
	
  
  }
 
 
 
 

  
  }
 
 
 
 

  
  function 
  
  TPL
  
  () 
  
  {
 
 
 
 
	
  
  if 
  
  (
  
  !
  
  run
  
  ) 
  
  {
 
 
 
 
		
  
  run 
  
  = 
  
  true
  
  ;
 
 
 
 
		
  
  P02i
  
  .
  
  src 
  
  = 
  
  IMGSRC
  
  [
  
  kI
  
  ].
  
  src
  
  ;
 
 
 
 
		
  
  P2
  
  .
  
  style
  
  .
  
  width 
  
  = 
  
  0
  
  ;
 
 
 
 
		
  
  kI
  
  --
  
  ;
 
 
 
 
		
  
  if 
  
  (
  
  kI 
  
  < 
  
  0
  
  ) 
  
  kI 
  
  = 
  
  nI
  
  -
  
  1
  
  ;
 
 
 
 
		
  
  titLe
  
  (
  
  kI
  
  );
 
 
 
 
		
  
  P01i
  
  .
  
  src 
  
  = 
  
  IMGSRC
  
  [
  
  kI
  
  ].
  
  src
  
  ;
 
 
 
 
		
  
  P2i
  
  .
  
  src  
  
  = 
  
  IMGSRC
  
  [
  
  kI
  
  ].
  
  src
  
  ;
 
 
 
 
		
  
  for
  
  (
  
  var 
  
  i
  
  =
  
  1
  
  ; 
  
  i
  
  <=
  
  20
  
  ; 
  
  i
  
  ++
  
  ) 
  
  setTimeout
  
  (
  
  "TPL_("
  
  +
  
  i
  
  +
  
  ")"
  
  , 
  
  i
  
  *
  
  32
  
  );
 
 
 
 
	
  
  } 
  
  else 
  
  setTimeout
  
  (
  
  "TPL()"
  
  , 
  
  100
  
  );
 
 
 
 

  
  }
 
 
 
 

  
  function 
  
  titLe
  
  (
  
  p
  
  ) 
  
  {
 
 
 
 
	
  
  document
  
  .
  
  getElementById
  
  (
  
  "TXTBOX"
  
  ).
  
  innerHTML 
  
  = 
  
  IMGSRC
  
  [
  
  p
  
  ].
  
  alt
  
  ;
 
 
 
 

  
  }
 
 
 
 

  
  onload 
  
  = 
  
  function
  
  () 
  
  {
 
 
 
 
	
  
  IMGSRC  
  
  = 
  
  document
  
  .
  
  getElementById
  
  (
  
  "imgsrc"
  
  ).
  
  getElementsByTagName
  
  (
  
  "img"
  
  );
 
 
 
 
	
  
  DB      
  
  = 
  
  document
  
  .
  
  getElementById
  
  (
  
  "DHTMLBOOK"
  
  );
 
 
 
 
	
  
  P01     
  
  = 
  
  DB
  
  .
  
  getElementsByTagName
  
  (
  
  "span"
  
  )[
  
  0
  
  ];
 
 
 
 
	
  
  P01i    
  
  = 
  
  P01
  
  .
  
  getElementsByTagName
  
  (
  
  "img"
  
  )[
  
  0
  
  ];
 
 
 
 
	
  
  P02     
  
  = 
  
  DB
  
  .
  
  getElementsByTagName
  
  (
  
  "span"
  
  )[
  
  1
  
  ];
 
 
 
 
	
  
  P02i    
  
  = 
  
  P02
  
  .
  
  getElementsByTagName
  
  (
  
  "img"
  
  )[
  
  0
  
  ];
 
 
 
 
	
  
  P1      
  
  = 
  
  DB
  
  .
  
  getElementsByTagName
  
  (
  
  "span"
  
  )[
  
  2
  
  ];
 
 
 
 
	
  
  P1i     
  
  = 
  
  P1
  
  .
  
  getElementsByTagName
  
  (
  
  "img"
  
  )[
  
  0
  
  ];
 
 
 
 
	
  
  P2      
  
  = 
  
  DB
  
  .
  
  getElementsByTagName
  
  (
  
  "span"
  
  )[
  
  3
  
  ];
 
 
 
 
	
  
  P2i     
  
  = 
  
  P2
  
  .
  
  getElementsByTagName
  
  (
  
  "img"
  
  )[
  
  0
  
  ];
 
 
 
 
	
  
  nI      
  
  = 
  
  IMGSRC
  
  .
  
  length
  
  ;
 
 
 
 
	
  
  P1i
  
  .
  
  src 
  
  = 
  
  IMGSRC
  
  [
  
  kI
  
  ].
  
  src
  
  ;
 
 
 
 
	
  
  P2i
  
  .
  
  src 
  
  = 
  
  IMGSRC
  
  [
  
  kI
  
  ].
  
  src
  
  ;
 
 
 
 
	
  
  titLe
  
  (
  
  kI
  
  );
 
 
 
 
	
  
  DB
  
  .
  
  style
  
  .
  
  visibility 
  
  = 
  
  "visible"
  
  ;
 
 
 
 

  
  }
 
 
 
 

  
  //-->
 
 
 
 

  
  <
  
  /SCRIPT>
 
 
 
 

  
  

 
 
 
 

  
  <
  
  META 
  
  content
  
  =
  
  "MSHTML 6.00.6000.16809" 
  
  name
  
  =
  
  GENERATOR
  
  ><
  
  /HEAD>
 
 
 
 

  
  <
  
  BODY
  
  >
 
 
 
 

  
  

 
 
 
 

  
  <
  
  DIV 
  
  id
  
  =
  
  center
  
  >
 
 
 
 

  
  <
  
  DIV 
  
  id
  
  =
  
  DHTMLBOOK
  
  ><
  
  SPAN 
  
  class
  
  =
  
  page 
  
  onMouseDown
  
  =
  
  "return false;" 
  
  ondblclick
  
  =
  
  TPL
  
  (); 
  
  onclick
  
  =
  
  TPL
  
  ();
  
  ><
  
  IMG 
  
  class
  
  =
  
  img
  
  ><
  
  /SPAN>
 
 
 
 

  
  <
  
  SPAN 
  
  class
  
  =
  
  "page right" 
  
  onmousedown
  
  =
  
  "return false;" 
  
  ondblclick
  
  =
  
  TPR
  
  (); 
  
  onclick
  
  =
  
  TPR
  
  ();
  
  ><
  
  IMG 
  
  class
  
  =
  
  img 
  
  style
  
  =
  
  "LEFT: -100%"
  
  ><
  
  /SPAN>
 
 
 
 

  
  <
  
  SPAN 
  
  class
  
  =
  
  "page turn" 
  
  onMouseDown
  
  =
  
  "return false;" 
  
  ondblclick
  
  =
  
  TPL
  
  (); 
  
  onclick
  
  =
  
  TPL
  
  ();
  
  ><
  
  IMG 
  
  class
  
  =
  
  img 
  
  style
  
  =
  
  "FILTER: alpha(); opacity: 1"
  
  ><
  
  /SPAN>
 
 
 
 

  
  <
  
  SPAN 
  
  class
  
  =
  
  "page turn right" 
  
  onmousedown
  
  =
  
  "return false;" 
  
  ondblclick
  
  =
  
  TPR
  
  (); 
  
  onclick
  
  =
  
  TPR
  
  ();
  
  ><
  
  IMG 
  
  class
  
  =
  
  img 
  
  style
  
  =
  
  "FILTER: alpha(); LEFT: -100%; opacity: 1"
  
  ><
  
  /SPAN> 
 
 
 
 

  
  <
  
  DIV 
  
  id
  
  =
  
  TXTBOX
  
  ><
  
  /DIV></DIV></DIV>
 
 
 
 

  
  <
  
  DIV 
  
  id
  
  =
  
  imgsrc 
  
  style
  
  =
  
  "VISIBILITY: hidden"
  
  >
 
 
 
 

  
  <
  
  IMG 
  
  alt
  
  =
  
  "In the early morning he departed." 
  
  src
  
  =
  
  "http://www.lanrentuku.com/down/js/images/12499727220.jpg"
  
  >
 
 
 
 

  
  <
  
  IMG 
  
  alt
  
  =
  
  "Believing she had dreamed of the roar of his bike," 
  
  src
  
  =
  
  "http://www.lanrentuku.com/down/js/images/12499727221.jpg"
  
  >
 
 
 
 

  
  <
  
  IMG 
  
  alt
  
  =
  
  "she woke up to the sunshine in her eyelids." 
  
  src
  
  =
  
  "http://www.lanrentuku.com/down/js/images/12499727222.jpg"
  
  >
 
 
 
 

  
  <
  
  /DIV>
 
 
 
 

  
  <
  
  p
  
  >
  
  查找更多代码，请访问：
  
  <
  
  a 
  
  href
  
  =
  
  "http://www.lanrentuku.com" 
  
  target
  
  =
  
  "_blank"
  
  >
  
  懒人图库
  
  <
  
  /a></p>
 
 
 
 

  
  <
  
  /BODY></HTML>