jquery实现书架选择书本打开交互动画效果代码
代码语言：html
所属分类：悬停
代码描述：jquery实现书架选择书本打开交互动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!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=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Book Showcase</title>
<style>
/* General Demo Style */
@font-face {
font-family: 'the_godfatherregular';
src: url('../fonts/thegodfather-v2-webfont.eot');
src: url('../fonts/thegodfather-v2-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/thegodfather-v2-webfont.woff') format('woff'),
url('../fonts/thegodfather-v2-webfont.ttf') format('truetype'),
url('../fonts/thegodfather-v2-webfont.svg#the_godfatherregular') format('svg');
font-weight: normal;
font-style: normal;
}
html { height: 100%; }
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
body {
font-family: 'Lato', Calibri, Arial, sans-serif;
background: #f6f6f6;
font-weight: 400;
font-size: 15px;
color: #333;
overflow: scroll;
overflow-x: hidden;
}
.demo-2 body {
background: url(../images/wood.jpg);
}
a {
color: #555;
text-decoration: none;
}
.container {
width: 100%;
position: relative;
}
.main,
.container > header {
width: 90%;
max-width: 1060px;
margin: 0 auto;
position: relative;
padding: 0 30px 50px 30px;
}
.container > header {
padding: 30px 30px 40px 30px;
}
.container > header h1 {
font-size: 34px;
line-height: 38px;
margin: 0;
font-weight: 700;
color: #333;
float: left;
}
/* Header Style */
.codrops-top {
line-height: 24px;
font-size: 11px;
background: #fff;
background: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
z-index: 9999;
position: relative;
box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
}
.codrops-top a {
padding: 0px 10px;
letter-spacing: 1px;
color: #333;
display: inline-block;
}
.codrops-top a:hover {
background: rgba(255,255,255,0.8);
color: #000;
}
.codrops-top span.right {
float: right;
}
.codrops-top span.right a {
float: left;
display: block;
}
/* Demo Buttons Style */
.codrops-demos {
float: right;
}
.codrops-demos a {
display: inline-block;
margin: 10px;
color: #666;
font-weight: 700;
line-height: 30px;
border-bottom: 4px solid transparent;
}
.codrops-demos a:hover {
color: #000;
border-color: #000;
}
.codrops-demos a.current-demo,
.codrops-demos a.current-demo:hover {
color: #aaa;
border-color: #aaa;
}
.support-note {
color: #d7823e;
font-size: 16px;
display: block;
font-weight: bold;
text-align: center;
padding: 5px 0;
text-align: left;
clear: both;
}
.bookshelf {
width: 100%;
height: 63px;
z-index: -1;
margin-top: -25px;
background: transparent url(//repo.bfw.wiki/bfwrepo/image/606983c5b5ef8.png) no-repeat center center;
position: relative;
}
.bk-list {
list-style: none;
position: relative;
width: 533px; /* 13 books * 40px + 13 books * margin (1px) */
margin: 0 auto;
-webkit-perspective: 1800px;
-moz-perspective: 1800px;
perspective: 1800px;
-webkit-perspective-origin: 50% 15%;
-moz-perspective-origin: 50% 15%;
perspective-origin: 50% 15%;
}
.bk-list li {
position: relative;
width: 40px;
height: 400px;
float: left;
z-index: 1;
margin: 0px 0px 0px 1px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.bk-list li:last-child {
margin-right: 0;
}
.bk-list li .bk-book {
cursor: pointer;
position: absolute;
width: 100%;
height: 400px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform .5s;
-moz-transition: -moz-transform .5s;
transition: transform .5s;
-webkit-transform: rotate3d(0,1,0,90deg);
-moz-transform: rotate3d(0,1,0,90deg);
transform: rotate3d(0,1,0,90deg);
}
.bk-list li .bk-book:hover {
-webkit-transform: rotateY(90deg) rotateZ(-15deg) translate3d(-100px,0,0);
-moz-transform: rotateY(90deg) rotateZ(-15deg) translate3d(-100px,0,0);
transform: rotateY(90deg) rotateZ(-15deg) translate3d(-100px,0,0);
}
.bk-list li .bk-book > div,
.bk-list li .bk-front > div {
display: block;
position: absolute;
}
.bk-list li .bk-front {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transition: -webkit-transform .5s;
-moz-transition: -moz-transform .5s;
transition: transform .5s;
-webkit-transform: translate3d(0,0,20px);
-moz-transform: translate3d(0,0,20px);
transform: translate3d(0,0,20px);
}
.bk-list li .bk-front > div {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.bk-list li .bk-page {
-webkit-transform: translate3d(0,0,19px);
-moz-transform: translate3d(0,0,19px);
transform: translate3d(0,0,19px);
display: none;
width: 295px;
height: 390px;
top: 5px;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.bk-list li .bk-front,
.bk-list li .bk-back,
.bk-list li .bk-front > div {
width: 300px;
height: 400px;
}
.bk-list li .bk-left,
.bk-list li .bk-right {
width: 40px;
left: -20px;
}
.bk-list li .bk-top,
.bk-list li .bk-bottom {
width: 295px;
height: 40px;
top: -15px;
}
.bk-list li .bk-back {
-webkit-transform: rotate3d(0,1,0,-180deg) translate3d(0,0,20px);
-moz-transform: rotate3d(0,1,0,-180deg) translate3d(0,0,20px);
transform: rotate3d(0,1,0,-180deg) translate3d(0,0,20px);
border-radius: 3px 0 0 3px;
}
.bk-list li .bk-cover-back {
background-color: #000;
-webkit-transform: rotate3d(0,1,0,-180deg);
-moz-transform: rotate3d(0,1,0,-180deg);
transform: rotate3d(0,1,0,-180deg);
}
.bk-list li .bk-right {
height: 390px;
top: 5px;
-webkit-transform: rotate3d(0,1,0,90deg) translate3d(0,0,295px);
-moz-transform: rotate3d(0,1,0,90deg) translate3d(0,0,295px);
transform: rotate3d(0,1,0,90deg) translate3d(0,0,295px);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.bk-list li .bk-left {
height: 400px;
-webkit-transform: rotate3d(0,1,0,-90deg);
-moz-transform: rotate3d(0,1,0,-90deg);
transform: rotate3d(0,1,0,-90deg);
box-shadow:
inset 4px 0 5px rgba(255,255,255,0.1),
inset 5px 0 5px rgba(0,0,0,0.05),
inset -5px 0 5px rgba(0,0,0,0.04);;
}
.bk-list li .bk-top {
-webkit-transform: rotate3d(1,0,0,90deg);
-moz-transform: rotate3d(1,0,0,90deg);
transform: rotate3d(1,0,0,90deg);
}
.bk-list li .bk-bottom {
-webkit-transform: rotate3d(1,0,0,-90deg) translate3d(0,0,390px);
-moz-transform: rotate3d(1,0,0,-90deg) translate3d(0,0,390px);
transform: rotate3d(1,0,0,-90deg) translate3d(0,0,390px);
}
/* Transform classes */
.bk-list li .bk-viewinside .bk-front {
-webkit-transform: translate3d(0,0,20px) rotate3d(0,1,0,-160deg);
-moz-transform: translate3d(0,0,20px) rotate3d(0,1,0,-160deg);
transform: translate3d(0,0,20px) rotate3d(0,1,0,-160deg);
}
.bk-list li .bk-book.bk-viewinside {
-webkit-transform: rotate3d(0,1,0,0deg) translateX(0px) translateZ(100px) !important;
-moz-transform: rotate3d(0,1,0,0deg) translateX(0px) translateZ(100px) !important;
transform: rotate3d(0,1,0,0deg) translateX(0px) translateZ(100px) !important;
}
.bk-list li .bk-book.bk-outside {
-webkit-transform: rotate3d(0,1,0,90deg) translateX(-300px);
-moz-transform: rotate3d(0,1,0,90deg) translateX(-300px);
transform: rotate3d(0,1,0,90deg) translateX(-300px);
}
.bk-list li .bk-book.bk-viewback {
-webkit-transform: translate3d(0,0,0px) rotate3d(0,1,0,180deg);
-moz-transform: translate3d(0,0,0px) rotate3d(0,1,0,180deg);
transform: translate3d(0,0,0px) rotate3d(0,1,0,180deg);
}
/* Main colors and content */
.bk-list li .bk-page,
.bk-list li .bk-right,
.bk-list li .bk-top,
.bk-list li .bk-bottom {
background-color: #fff;
}
.bk-list li .bk-front > div {
border-radius: 0 3px 3px 0;
box-shadow:
inset 4px 0 10px rgba(0, 0, 0, 0.1);
}
.bk-list li .bk-front:after {
content: '';
position: absolute;
top: 1px;
bottom: 1px;
left: -1px;
width: 1px;
}
.bk-list li .bk-cover:after,
.bk-list li .bk-back:after {
content: '';
position: absolute;
top: 0;
left: 10px;
bottom: 0;
width: 3px;
background: rgba(0,0,0,0.06);
box-shadow: 1px 0 3px rgba(255, 255, 255, 0.1);
}
.bk-list li .bk-back:after {
left: auto;
right: 10px;
}
.bk-left h2 {
width: 400px;
height: 40px;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: rotate(90deg) translateY(-40px);
-moz-transform: rotate(90deg) translateY(-40px);
transform: rotate(90deg) translateY(-40px);
}
.bk-content {
position: absolute;
top: 30px;
left: 20px;
bottom: 20px;
right: 20px;
padding: 30px;
overflow: hidden;
background: #fff;
opacity: 0;
pointer-events: none;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
cursor: default;
}
.bk-content-current {
opacity: 1;
pointer-events: auto;
}
.bk-content p {
padding: 0 0 10px;
-webkit-font-smoothing: antialiased;
color: #000;
font-size: 13px;
line-height: 20px;
text-align: justify;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.bk-page nav {
display: block;
text-align: center;
margin-top: 20px;
position: relative;
z-index: 100;
cursor: pointer;
}
.bk-page nav span {
display: inline-block;
width: 20px;
height: 20px;
color: #aaa;
background: #f0f0f0;
border-radius: 50%;
}
/* Individual style & artwork */
/* Book 1 */
.book-1 .bk-front > div,
.book-1 .bk-back,
.book-1 .bk-left,
.book-1 .bk-front:after {
background-color: #ff924a;
}
.book-1 .bk-cover {
background-image: url(../images/1.png);
background-repeat: no-repeat;
background-position: 10px 40px;
}
.book-1 .bk-cover h2 {
position: absolute;
bottom: 0;
right: 0;
left: 0;
padding: 30px;
background: rgba(255,255,255,0.2);
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,0.1);
}
.book-1 .bk-cover h2 span:first-child,
.book-1 .bk-left h2 span:first-child {
text-transform: uppercase;
font-weight: 400;
font-size: 13px;
padding-right: 20px;
}
.book-1 .bk-cover h2 span:first-child {
display: block;
}
.book-1 .bk-cover h2 span:last-child,
.book-1 .bk-left h2 span:last-child {
font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif;
}
.book-1 .bk-content p {
font-family: Georgia, Times, "Times New Roman", serif;
}
.book-1 .bk-left h2 {
color: #fff;
font-size: 15px;
line-height: 40px;
padding-right: 10px;
text-align: right;
}
.book-1 .bk-back p {
color: #fff;
font-size: 13px;
padding: 40px;
text-align: center;
font-weight: 700;
}
/* Book 2 */
.book-2 .bk-front > div,
.book-2 .bk-back,
.book-2 .bk-left,
.book-2 .bk-front:after {
background-color: #222;
}
.book-2 .bk-cover {
background-image: url(../images/2.png);
background-repeat: no-repeat;
background-position: 98% 0%;
}
.book-2 .bk-cover h2,
.book-2 .bk-left h2 {
color: #fff;
font-family: 'the_godfatherregular', Georgia, serif;
font-weight: 400;
}
.book-2 .bk-cover h2 {
font-size: 138px;
line-height: 102px;
padding: 30px;
}
.book-2 .bk-cover h2 span:first-child {
position: relative;
display: block;
}
.book-2 .bk-cover h2 span:first-child:before {
content: 'A novel';
font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif;
text-transform: uppercase;
position: absolute;
color: red;
font-size: 20px;
right: -15px;
bottom: -60px;
}
.book-2 .bk-cover h2 span:last-child {
font-size: 100px;
line-height: 80px;
display: block;
position: relative;
}
.book-2 .bk-cover h2 span:last-child:before {
content: 'by';
font-size: 16px;
color: red;
position: absolute;
top: -32px;
left: 62px;
font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif;
}
.book-2 .bk-cover h2 span:last-child:after {
content: '';
width: 20px;
height: 20px;
border-radius: 50%;
background: #f9ed65;
position: absolute;
top: 5px;
left: 101px;
}
.book-2 .bk-left h2 {
font-size: 20px;
line-height: 40px;
padding-right: 10px;
text-align: right;
}
.book-2 .bk-back p {
color: red;
font-size: 13px;
font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif;
padding: 40px;
text-align: center;
}
/* Book 3 */
.book-3 .bk-front > div,
.book-3 .bk-back,
.book-3 .bk-left,
.book-3 .bk-front:after {
background-color: #a4c19e;
}
.book-3 .bk-cover {
background-image: url(../images/3.png);
background-repeat: no-repeat;
background-position: 100% 95%;
}
.book-3 .bk-cover h2 {
position: absolute;
top: 40px;
right: 40px;
left: 40px;
padding-top: 15px;
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,0.1);
}
.book-3 .bk-cover h2 span:first-child,
.book-3 .bk-left h2 span:first-child {
text-transform: uppercase;
font-weight: 400;
font-size: 13px;
padding-right: 20px;
}
.book-3 .bk-cover h2 span:first-child {
display: block;
}
.book-3 .bk-cover h2 span:last-child,
.book-3 .bk-left h2 span:last-child,
.book-3 .bk-content p {
font-family: Georgia, Times, "Times New Roman", serif;
}
.book-3 .bk-left h2 {
color: #fff;
font-size: 14px;
line-height: 40px;
text-align: center;
}
.book-3 .bk-back img {
width: 200px;
display: block;
margin: 30px auto 0;
}
.book-3 .bk-back p {
color: #fff;
font-size: 13px;
font-family: Georgia, Times, "Times New Roman", serif;
padding: 40px;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.1);
}
/* Some color variation for the other books */
.bk-list li:nth-child(4) .bk-book .bk-front > div,
.bk-list li:nth-child(4) .bk-book .bk-back,
.bk-list li:nth-child(4) .bk-book .bk-left,
.bk-list li:nth-child(4) .bk-book .bk-front:after {
background-color: #cfa6ef;
}
.bk-list li:nth-child(5) .bk-book .bk-front > div,
.bk-list li:nth-child(5) .bk-book .bk-back,
.bk-list li:nth-child(5) .bk-book .bk-left,
.bk-list li:nth-child(5) .bk-book .bk-front:after {
background-color: #FFC2CE;
}
.bk-list li:nth-child(6) .bk-book .bk-front > div,
.bk-list li:nth-child(6) .bk-book .bk-back,
.bk-list li:nth-child(6) .bk-book .bk-left,
.bk-list li:nth-child(6) .bk-book .bk-front:after {
background-color: #80B3FF;
}
.bk-list li:nth-child(7) .bk-book .bk-front > div,
.bk-list li:nth-child(7) .bk-book .bk-back,
.bk-list li:nth-child(7) .bk-book .bk-left,
.bk-list li:nth-child(7) .bk-book .bk-front:after {
background-color: #FD6E8A;
}
.bk-list li:nth-child(8) .bk-book .bk-front > div,
.bk-list li:nth-child(8) .bk-book .bk-back,
.bk-list li:nth-child(8) .bk-book .bk-left,
.bk-list li:nth-child(8) .bk-book .bk-front:after {
background-color: #A2122F;
}
.bk-list li:nth-child(9) .bk-book .bk-front > div,
.bk-list li:nth-child(9) .bk-book .bk-back,
.bk-list li:nth-child(9) .bk-book .bk-left,
.bk-list li:nth-child(9) .bk-book .bk-front:after {
background-color: #439877;
}
.bk-list li:nth-child(10) .bk-book .bk-front > div,
.bk-list li:nth-child(10) .bk-book .bk-back,
.bk-list li:nth-child(10) .bk-book .bk-left,
.bk-list li:nth-child(10) .bk-book .bk-front:after {
background-color: #5E445D;
}
.bk-list li:nth-child(11) .bk-book .bk-front > div,
.bk-list li:nth-child(11) .bk-book .bk-back,
.bk-list li:nth-child(11) .bk-book .bk-left,
.bk-list li:nth-child(11) .bk-book .bk-front:after {
background-color: #A8936D;
}
/* Fallbacks */
.no-csstransforms3d .bk-list li .bk-book > div,
.no-csstransforms3d .bk-list li .bk-book .bk-cover-back {
display: none;
}
.no-csstransforms3d .bk-list li .bk-book > div.bk-front {
display: block;
}
.no-csstransforms3d .bk-info button,
.no-js .bk-info button {
display: none;
}
.no-csstransforms3d .bk-list {
width: auto;
}
.no-csstransforms3d .bk-list li {
position: relative;
width: 300px;
margin: 10px;
float: left;
}
</style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/modernizr.custom.2.6.2.js"></script>
</head>
<body>
<div class="container">
<header class="clearfix">
<h1>3D Book Showcase</h1>
</header>
<div class="main">
<ul id="bk-list" class="bk-list clearfix">
<li>
<div class="bk-book book-1">
<div class="bk-front">
<div class="bk-cover">
<h2>
<span>Anthony Burghiss</span>
<span>A Catwork Orange</span>
</h2>
</div>
<div class="bk-cover-back"></div>
</div>
<div class="bk-page">
<div class="bk-content bk-content-current">
<p>Red snapper Kafue pike fangtooth humums slipmouth, salmon cutlassfish; swallower European perch mola mola sunfish, threadfin bream. Billfish hog sucker trout-perch lenok orbicular velvetfish. Delta smelt striped bass, medusafish dragon goby starry flounder cuchia round whitefish northern anchovy spadefish merluccid hake cat shark Black pickerel. Pacific cod.</p>
</div>
<div class="bk-content">
<p>Whale catfish leatherjacket deep sea anglerfish grenadier sawfish pompano dolphinfish carp large-eye bream, squeaker amago. Sandroller; rough scad, tiger shovelnose catfish snubnose parasitic eel? Black bass soldierfish duckbill--Rattail Atlantic saury Blind shark California halibut; false trevally warty angler!</p>
</div>
<div class="bk-content">
<p>Trahira giant wels cutlassfish snapper koi blackchin mummichog mustard eel rock bass whiff murray cod. Bigmouth buffalo ling cod giant wels, sauger pink salmon. Clingfish luderick treefish flatfish Cherubfish oldwife Indian mul gizzard shad hagfish zebra danio. Butterfly ray lizardfish ponyfish muskellunge Long-finned sand diver mullet swordfish limia ghost carp filefish.</p>
</div>
</div>
<div class="bk-back">
<p>In this nightmare vision of cats in revolt, fifteen-year-old Alex and his friends set out on a diabolical orgy of robbery, rape, torture and murder. Alex is jailed for his teenage delinquency and the State tries to reform him - but at what cost?</p>
</div>
<div class="bk-right"></div>
<div class="bk-left">
<h2>
<span>Anthony Burghiss</span>
<span>A Catwork Orange</span>
</h2>
</div>
<div class="bk-top"></div>
<div class="bk-bottom"></div>
</div>
</li>
<li>
<div class="bk-book book-2">
<div class="bk-front">
<div class="bk-cover">
<h2>
<span>The Catfather</span>
<span>Mario Purrzo</span>
</h2>
</div>
<div class="bk-cover-back"></div>
</div>
<div class="bk-page">
<div class="bk-content">
<p>Whale catfish leatherjacket deep sea anglerfish grenadier sawfish pompano dolphinfish carp large-eye bream, squeaker amago. Sandroller; rough scad, tiger shovelnose catfish snubnose parasitic eel? Black bass soldierfish duckbill--Rattail Atlantic saury Blind shark California halibut; false trevally warty angler!</p>
</div>
<div class="bk-content">
<p>Trahira giant wels cutlassfish snapper koi blackchin mummichog mustard eel rock bass whiff murray cod. Bigmouth buffalo ling cod giant wels, sauger pink salmon. Clingfish luderick treefish flatfish Cherubfish oldwife Indian mul gizzard shad hagfish zebra danio. Butterfly ray lizardfish ponyfish muskellunge Long-finned sand diver mullet swordfish limia ghost carp filefish.</p>
</div>
<div class="bk-content bk-content-current">
<p>Red snapper Kafue pike fangtooth humums's slipmouth, salmon cutlassfish; swallower European perch mola mola sunfish, threadfin bream. Billfish hog sucker trout-perch lenok orbicular velvetfish. Delta smelt striped bass, medusafish dragon goby starry flounder cuchia round whitefish northern anchovy spadefish merluccid hake cat shark Black pickerel. Pacific cod.</p>
</div>
</div>
<div class="bk-back">
<p>Tyrant, blackmailer, racketeer, murderer - his influence reaches every level of American society. Meet Cat Corleone, a friendly cat, a just cat, a reasonable cat. The deadliest lord of the Cata Nostra. The Catfather.</p>
</div>
<div class="bk-right"></div>
<div class="bk-left">
<h2>
<span>The Catfather</span>
<span>by Mario Purrzo</span>
</h2>
</div>
<div class="bk-top"></div>
<div class="bk-bottom"></div>
</div>
</li>
<li>
<div class="bk-book book-3">
<div class="bk-front">
<div class="bk-cover">
<h2>
<span>J.C. Salinger</span>
<span>The Catcher in the Rye</span>
</h2>
</div>
<div class="bk-cover-back"></div>
</div>
<div class="bk-page">
<div class="bk-content bk-content-current">
<p>Oceanic flyingfish spotted danio fingerfish leaffish, Billfish halibut Atlantic cod threadsail poacher slender mola. Swallower muskellunge, turbot needlefish yellow perch trout dhufish dwarf gourami false moray southern smelt cod dwarf gourami. Betta blue catfish bottlenose electric ray sablefish.</p>
</div>
<div class="bk-content">
<p>Whale catfish leatherjacket deep sea anglerfish grenadier sawfish pompano dolphinfish carp large-eye bream, squeaker amago. Sandroller; rough scad, tiger shovelnose catfish snubnose parasitic eel? Black bass soldierfish duckbill--Rattail Atlantic saury Blind shark California halibut; false trevally warty angler!</p>
</div>
<div class="bk-content">
<p>Trahira giant wels cutlassfish snapper koi blackchin mummichog mustard eel rock bass whiff murray cod. Bigmouth buffalo ling cod giant wels, sauger pink salmon. Clingfish luderick treefish flatfish Cherubfish oldwife Indian mul gizzard shad hagfish zebra danio. Butterfly ray lizardfish ponyfish muskellunge Long-finned sand diver mullet swordfish limia ghost carp filefish.</p>
</div>
</div>
<div class="bk-back">
<img src="images/3.png" alt="cat"/>
<p>Holden Catfield is a seventeen-year-old dropout who has just been kicked out of his fourth school. Navigating his way through the challenges of growing up, Holden dissects the 'phony' aspects of society.</p>
</div>
<div class="bk-right"></div>
<div class="bk-left">
<h2>
<span>J.C. Salinger</span>
<span>The Catcher in the Rye</span>
</h2>
</div>
<div class="bk-top"></div>
<div class="bk-bottom"></div>
</div>
</li>
<li>
<div class="bk-book book-1">
<div class="bk-front">
<div class="bk-cover">
<h2>
<span>Anthony Burghiss</span>
<span>A Catwork Orange</span>
</h2>
</div>
<div class="bk-cover-back"></div>
</div>
<div class="bk-page">
<div class="bk-content bk-content-current">
<p>Red snapper Kafue pike fangtooth humums slipmouth, salmon cutlassfish; swallower European perch mola mola sunfish, threadfin bream. Billfish hog sucker trout-perch lenok orbicular velvetfish. Delta smelt striped bass, medusafish dragon goby starry flounder cuchia round whitefish northern anchovy spadefish merluccid hake cat shark Black pickerel. Pacific cod.</p>
</div>
<div class="bk-content">
<p>Whale catfish leatherjacket deep sea anglerfish grenadier sawfish pompano dolphinfish carp large-eye bream, squeaker amago. Sandroller; rough scad, tiger shovelnose catfish snubnose parasitic eel? Black bass soldierfish duckbill--Rattail Atlantic saury Blind shark California halibut; false trevally warty angler!</p>
</div>
<div class="bk-content">
<p>Trahira giant wels cutlassfish snapper koi blackchin mummichog mustard eel rock bass whiff murray cod. Bigmouth buffalo ling cod giant wels, sauger pink salmon. Clingfish luderick treefish flatfish Cherubfish oldwife Indian mul gizzard shad hagfish zebra danio. .........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0