用户注册



邮箱：

密码：

用户登录


邮箱：

密码：
记住登录一个月忘记密码？

发表随想


还能输入：200字
云代码 - html代码库

HTML5 book响应式翻页效果HTML5pages

2014-11-13 作者： 云代码会员举报

[html]代码库

<!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" dir="ltr" lang="en-US">
<![endif]-->
<!--[if IE 7]>
<html id="ie7" dir="ltr" lang="en-US">
<![endif]-->
<!--[if IE 8]>
<html id="ie8" dir="ltr" lang="en-US">
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
<html dir="ltr" lang="en-US">
<!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>html6game book 翻页</title>
<link rel="stylesheet" type="text/css" media="all" href="images/css/style.css" />
<!--[if lt IE 9]>
<script src="images/js/html5.js" type="text/javascript"></script>
<![endif]-->
</head>
<body class="home page page-id-2 page-template-default single-author singular two-column right-sidebar">
<div id="page" class="hfeed">
	<!-- #branding -->
<div id="mpc-styles-switcher">
	<!-- <img src="images/bg/logo.jpg"/> -->
	 <!-- end ss-content -->
</div> <!-- end mpc-styles-switcher -->

	<div id="main">
		
		<div id="primary">
			<div id="content" role="main">
					
<article id="post-2" class="post-2 page type-page status-publish hentry">
	
	<div class="entry-content">
			
<div id="flipbook-container-0" class="flipbook-container"><div id="flipbook-0" class="flipbook"><div class="fb-page single"><div class="page-content"><div class="container"><div class="page-html"></div><img src="images/001/cover.jpg" class="bg-img"/></div></div></div><div class="fb-page double"><div class="page-content"><div class="container"><div class="page-html"><div class="preview-content left toc"></div><div class="preview-content right toc"><h2 class="enlarge">目　　录</h2>
						<p class="enlarge">使用HTML建立你自己的内容列表</p>
						<ul class="toc enlarge">
							<li><a href="#3"></a><span class="number">03</span><span class="text">table内容</span></a></li>
							<li><a href="#5"><span class="number">04</span><span class="text">最好的内容呈现方式</span></a></li>
							<li><a href="#7"><span class="number">06</span><span class="text">台式与移动设备的平台支持</span></a></li>
							<li><a href="#8"><span class="number">08</span><span class="text">响应式设计</span></a></li>
							<li><a href="#11"><span class="number">10</span><span class="text">简单和容易配置</span></a></li>
							<li><a href="#13"><span class="number">12</span><span class="text">功能强大而丰富</span></a></li>
							<li><a href="#15"><span class="number">14</span><span class="text">所有媒体尽在一本书中</span></a></li>
						</ul>
</div></div><img src="images/001/02-03.jpg" class="bg-img"/></div></div></div><div class="fb-page double"><div class="page-content"><div class="container"><div class="page-html"><div class="preview-content left presentation"><h3 class="enlarge">内容呈现最好的方法</h2>
						<p class="enlarge">Flip 本书是呈现内容的一款好工具，在世界上任何地方。所有你需要的是一个Web浏览器 ( <a href="#7">我们支持所有的设备！</a> ).</p>
						<p class="enlarge">翻转书是新的数字技术和模拟传统习惯，众所周知的纸质书籍的组合。</p>
						<p class="enlarge"><b>它的标准介绍！</b> 它吸引了观众的注意和创建页面翻转伟大的经验， <b>特别是在触摸屏！</b> </p>
						<h4 class="enlarge">如果使用：</h4>
						<ul class="enlarge">
							<li><a href="#" target="_blank">业务介绍</a></li>
							<li><a href="#" target="_blank">小册子</a></li>
							<li><a href="#" target="_blank">文件夹</a></li>
							<li><a href="#" target="_blank">相册</a></li>
							<li>以及更多...</li>
						</ul>
</div><div class="preview-content right presentation"><p class="enlarge"><b>我们知道如何创造最好的可用书籍！</b> Flash翻页书–不需要任何Flash <b style="color: #a40505;">畅销书翻转</b> 它是活跃的 <b>第二畅销产品！</b></p>
						<a href="" target="_blank" class="button-purchase"></a></div></div><img src="images/001/04-05.jpg" class="bg-img"/></div></div></div><div class="fb-page double"><div class="page-content"><div class="container"><div class="page-html"></div><img src="images/001/06-07.jpg" class="bg-img"/></div></div></div><div class="fb-page double"><div class="page-content"><div class="container"><div class="page-html"><div class="preview-content left features"><h3 class="enlarge">强大的功能</h3></div><div class="preview-content right features"><h4 class="enlarge">主要特点：</h4>
						<ul class="enlarge">
							<li>先进的管理面板</li>
							<li>高分辨率变焦</li>
							<li>幻灯片 </li>
							<li>视频支持</li>
							<li>无限数量的页面</li>
							<li>深层链接</li>
							<li><a href="#13">容易定制页面</a></li>
						</ul>
						
						<h4 class="enlarge">Have a suggestion?</h4>
						<a href="mailto:support@mpcreation.pl"><img src="images/001/let-us-know.png" class="let-us-know enlarge"/></a></div></div><img src="images/001/08-09.jpg" class="bg-img"/></div></div></div><div class="fb-page double"><div class="page-content"><div class="container"><div class="page-html"><div class="preview-content left responsive"><h3 class="enlarge">伟大的响应式设计</h3>
						<p class="enlarge">我们关注细节。</p></div><div class="preview-content right responsive"><ul class="enlarge" style="margin-top:-15%">
							<li>设计适合每个决议</li>
							<li>优雅的中性图标</li>
							<li>背景模板</li>
							<li>平稳过渡</li>
							<li>自然的阴影</li>
						</ul>
</div></div><img src="images/001/10-11.jpg" class="bg-img"/></div></div></div><div class="fb-page double"><div class="page-content"><div class="container"><div class="page-html"><div class="preview-content left configuration"><h3 class="enlarge">简单的配置</h3>
						<p class="enlarge">没有编程，只需要HTML + CSS，就能建立自己的翻页书。 <b style="color: #a40505;">这很容易！</b> 仅仅 <b style="color: #a40505;">安装插件，遵循直观的用户界面 </b> 建立你的第一本书。</p>
						<h4 class="enlarge">可定制的：</h4>
						
						<ul class="enlarge">
							<li>书的尺寸</li>
							<li>背景图像和颜色</li>
							<li>书的边框</li>
							<li>菜单选项</li>
							<li>幻灯片播放速度</li>
						</ul>
						
						<h4 class="enlarge">提供支持</h4>
						<p class="enlarge">如果你对我们的产品有任何问题，请访问我们的 <a href="" target="_blank">支持站点</a>.</p>
</div><div class="preview-content right "></div></div><img src="images/001/12-13.jpg" class="bg-img"/></div></div></div><div class="fb-page double"><div class="page-content"><div class="container"><div class="page-html"><div class="preview-content left video"><h3 class="enlarge">一书中所有的媒体</h3>
						
						<h4 class="enlarge" style="color:#902415;">翻页书接受一切：</h4>
						
						<ul class="enlarge">
							<li>images</li>
							<li>html</li>
							<li>audio</li>
							<li>video</li>
						</ul>
</div><div class="preview-content right video"></div></div><img src="images/001/14-15.jpg" class="bg-img"/></div></div></div><div class="fb-page single"><div class="page-content"><div class="container"><div class="page-html"></div><img src="images/001/back-cover.jpg" class="bg-img"/></div></div></div></div></div>
			</div><!-- .entry-content -->
	<footer class="entry-meta">
	
	</footer><!-- .entry-meta -->
</article><!-- #post-2 -->

			</div><!-- #content -->
		</div><!-- #primary -->

	</div><!-- #main -->

	<!-- #colophon -->
</div><!-- #page -->
<script type='text/javascript' src='images/js/jquery.js?ver=1.7.2'></script>
<script type='text/javascript' src='images/js/jquery.easing.1.3.js?ver=3.4.1'></script>
<script type='text/javascript' src='images/js/jquery.doubletap.js?ver=3.4.1'></script>
<script type='text/javascript' src='images/js/page-js.js?ver=3.4.1'></script>
<script type='text/javascript' src='images/js/jquery.color.js?ver=2.0-4561m'></script>
<script type='text/javascript' src='images/js/turn.js?ver=3.4.1'></script>
<script type='text/javascript' src='images/js/flipbook.js?ver=3.4.1'></script>
</body>
</html>

[代码运行效果截图]


HTML5 book响应式翻页效果HTML5pages

[源代码打包下载]




网友评论    (发表评论)


发表评论：

评论须知：

  • 1、评论每次加2分，每天上限为30；
  • 2、请文明用语，共同创建干净的技术交流环境；
  • 3、若被发现提交非法信息，评论将会被删除，并且给予扣分处理，严重者给予封号处理；
  • 4、请勿发布广告信息或其他无关评论，否则将会删除评论并扣分，严重者给予封号处理。


扫码下载

加载中，请稍后...

输入口令后可复制整站源码

加载中，请稍后...