html5+jq模拟
杂志翻页 效果逼真
<!DOCTYPE
html PUBLIC "-//W3C//DTD X
HTML 1
.0 Transitional//EN" "http
://www
.w3
.org/TR/x
html1/DTD/x
html1-transitional
.dtd">
<!-- saved from url=(0070)http
://www
.17sucai
.com/preview/3630/2014-01-20/BookPreview1/index
.html -->
<
html xmlns="http
://www
.w3
.org/1999/x
html" class="
js cssanimations csstransforms3d csstransitions csstransformspreserve3d"><head><meta http-equiv="Content-Type" content="text/
html; charset=UTF-8">
<title>Book Preview with BookBlock</title>
<link rel="stylesheet" type="text/css" href="
./Book Preview with BookBlock_files/normalize
.css">
<link rel="stylesheet" type="text/css" href="
./Book Preview with BookBlock_files/demo
.css">
<!--必要样式-->
<link rel="stylesheet" type="text/css" href="
./Book Preview with BookBlock_files/bookblock
.css">
<link rel="stylesheet" type="text/css" href="
./Book Preview with BookBlock_files/component
.css">
<script src="
./Book Preview with BookBlock_files/modernizr
.custom
.js"></script>
</head>
<body>
<div id="scroll-wrap" class="container">
<div class="main">
<div id="bookshelf" class="bookshelf">
<figure class="">
<div class="perspective"><div class="book" data-book="book-1"><div class="cover"><div class="front"></div><div class="inner inner-left"></div></div><div class="inner inner-right"></div></div></div><div class="buttons"><a href="http
://www
.17sucai
.com/preview/3630/2014-01-20/BookPreview1/index
.html#">Look inside</a><a href="http
://www
.17sucai
.com/preview/3630/2014-01-20/BookPreview1/index
.html#">Details</a></div>
<figcaption><h2>9 Lives <span>Andrew Hudson</span></h2></figcaption>
<div class="details">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua
.</li>
<li>Graham Press</li>
<li>12
.09
.2010</li>
<li>397 pages</li>
</ul>
<span class="close-details"></span></div>
</figure>
<figure class="">
<div class="perspective"><div class="book" data-book="book-2"><div class="cover"><div class="front"></div><div class="inner inner-left"></div></div><div class="inner inner-right"></div></div></div><div class="buttons"><a href="http
://www
.17sucai
.com/preview/3630/2014-01-20/BookPreview1/index
.html#">Look inside</a><a href="http
://www
.17sucai
.com/preview/3630/2014-01-20/BookPreview1/index
.html#">Details</a></div>
<figcaption><h2>Life of a worm <span>Will Flores</span></h2></figcaption>
<div class="details">
<ul>
<li>Understanding the life of a worm can be enlightening to anybody
. Dive into the micro cosmos of a creeping and burrowing invertebrate and learn how a limbless little creature reaches happiness
.</li>
<li>Graham Press</li>
<li>12
.09
.2010</li>
<li>397 pages</li>
</ul>
<span class="close-details"></span></div>
</figure>
<figure class="">
<div class="perspective"><div class="book" data-book="book-8"><div class="cover"><div class="front"></div><div class="inner inner-left"></div></div><div class="inner inner-right"></div></div></div><div class="buttons"><a href="http
://www
.17sucai
.com/preview/3630/2014-01-20/BookPreview1/index
.html#">Look inside</a><a href="http
://www
.17sucai
.com/preview/3630/2014-01-20/BookPreview1/index
.html#">Details</a></div>
<figcaption><h2>Lemon Rainbow <span>Christa Hausmann</span></h2></figcaption>
本文介绍了一款名为turn.js的HTML5翻页插件，该插件使用硬件加速实现逼真的纸制书翻页效果，适用于多种平台且易于维护。体积小巧，便于集成到各种Web应用中。
扫一扫
304
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
