jquery bookblock实现图片仿书本翻页效果代码-html代码-BFW代码库

jquery bookblock实现图片仿书本翻页效果代码

代码语言：html

所属分类：其他

代码描述：jquery bookblock实现图片仿书本翻页效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" class="no-js demo-1">
<head>
<meta charset="UTF-8" />
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bookblock.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/modernizr.custom.79639.js"></script>
<style>

.bb-custom-wrapper {
	width: 420px;
	position: relative;
	margin: 0 auto 40px;
	text-align: center;
}

.bb-custom-wrapper .bb-bookblock {
	box-shadow: 0 12px 20px -10px rgba(81,64,49,0.6);
}

.bb-custom-wrapper h3 {
	font-size: 1.4em;
	font-weight: 300;
	margin: 0.4em 0 1em;
}

.bb-custom-wrapper nav {
	width: 100%;
	height: 30px;
	margin: 1em auto 0;
	position: relative;
	z-index: 0;
	text-align: center;
}

.bb-custom-wrapper nav a {
	display: inline-block;
	width: 30px;
	height: 30px;
	text-align: center;
	border-radius: 2px;
	background: #72b890;
	color: #fff;
	line-height: 30px;
	text-decoration: none;
	margin: 2px;
}

.bb-custom-wrapper nav a:hover {
	opacity: 0.6;
}
.bb-custom-icon {
    color: white;
}





</style>
</head>
<body>

<div class="container">

	
	<div class="main clearfix">
		<div class="bb-custom-wrapper">
			<div id="bb-bookblock" class="bb-bookblock">
				<div class="bb-item">
					<a href=""><img src="//repo.bfw.wiki/bfwrepo/image/606d0fedcdbbc.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_300,/quality,q_90" alt="image01"/></a>
				</div>
				<div class="bb-item">
					<a href=""><img src="//repo.bfw.wiki/bfwrepo/image/606d0fedcdbbc.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_300,/quality,q_90" alt="image01"/></a>
				</div>
					
			</div>
			<nav>
				<a id="bb-nav-first" href="#" class="bb-custom-icon bb-custom-icon-first"><</a>
				<a id="bb-nav-prev" href="#" class="bb-custom-icon bb-custom-icon-arrow-left"><<</a>
				<a id="bb-nav-next" href="#" class="bb-custom-icon bb-custom-icon-arrow-right">>></a>
				<a id="bb-nav-last" h.........完整代码请登录后点击上方下载按钮下载查看