<!DOCTYPE html>
<html lang="zh">
<head>
<meta 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>HTML5兼容电脑手机端3D翻页电子书特效</title>
<!--可无视-->
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/zzsc-demo.css">
<!--必要样式-->
<style type="text/css">
html,body{width:100%;margin:0px;padding:0px;background:#e0604a url('i/bg2.jpg');color:#000000;min-width:800px;}
body * { -webkit-tap-highlight-color: rgba(0,0,0,0); }
.links a:link,.links a:visited{color:black;text-decoration:none;font:20px sans-serif;}
.links a:hover{color:black;text-decoration:underline;}
.red {border:1px solid #ffc30d;}
.red-filled {background:#e0604a;border:1px solid #ffc30d;}
.blue {background:#67BCCF;}
.section {width:800px;border-radius:10px; margin:50px auto;}
.section p{text-align:center;margin:0px;padding:20px;font:16px sans-serif;line-height:140%;}
.section p strong {color:gold;}
.section-list {width:800px;border-radius:10px;margin:50px auto;}
.address{margin:0px auto 50px auto;padding:0px;width:800px;text-align:center;}
.address, .address a{font:16px arial, sans-serif;color:black;}
</style>
</head>
<body>
<div class="zzsc-container">
<div class="zzsc-demo center">
<a href="index.html" class="current">DEMO1</a>
<a href="index2.html">DEMO2</a>
</div>
<div class="section blue">
<p style="line-height:160%;">由于本地安全限制的原因，某些浏览器在本地查看时看不到效果。 <br> 以下浏览器支持OneBook3d v.2.30:：Chrome, Opera (WebKit), Firefox, Safari 和 Internet Explorer 11.</p>
</div>
<div class="section red">
<div style="padding:30px;">
<div id="photobook" style="height:100px;"></div>
</div>
</div>
<div class="section-list blue">
<div style="padding:30px;" class="links">
<p><a href="#"><strong>1. Example,</strong> language (italian), </a></p>
<p><a href="#"><strong>2. Example,</strong> border (100), pageColor:(green), image on background</a></p>
<p><a href="#"><strong>3. Example,</strong> border (10), slope(1), startPage(4), flip (basic) </a></p>
</div>
</div>
<div class="section red-filled">
<p style="line-height:160%;">Use option <strong>‘cesh:false’</strong> while you are testing your book and <strong>‘cesh:true’</strong> (by default) in web.<br>
Minimal width of parent element for book is <strong>266 px.</strong> After that the book will be hidden.</p>
</div>
</div>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/three.min.js"></script>
<script type="text/javascript" src="js/jquery.onebook3d-2.3.0-full-min.js"></script>
<script type="text/javascript">
$(function(){
var src1 = [
'ga02/001.jpg',
'ga02/002.jpg', 'ga02/003.jpg',
'ga02/004.jpg', 'ga02/005.jpg',
'ga02/006.jpg', 'ga02/007.jpg',
'ga02/008.jpg', 'ga02/009.jpg',
'ga02/010.jpg', 'ga02/011.jpg',
'ga02/012.jpg'
];
var src3 = [
['ga04/001.jpg','Title 1'],
['ga04/002.jpg','Title 2'], ['ga04/003.jpg','Title 3'],
['ga04/004.jpg','Title 4'], ['ga04/005.jpg','Title 5'],
['ga04/006.jpg','Title 6'], ['ga04/007.jpg','Title 7'],
['ga04/008.jpg','Title 8'], ['ga04/009.jpg','Title 9'],
['ga04/010.jpg','TItle 10']
];
var src4 = [
'ga04/001.jpg',
'ga04/002.jpg', 'ga04/003.jpg',
'ga04/004.jpg', 'ga04/005.jpg',
'ga04/006.jpg', 'ga04/007.jpg',
'ga04/008.jpg', 'ga04/009.jpg',
'ga04/010.jpg'
];
$('#photobook').onebook(src1,{skin:['light','dark'], bgDark:'#56998c url(i/bg.jpg)',bgLight:'#d97f6f url(i/bg2.jpg)', border:0, cesh:false});
$('.links a:eq(0)').click(function(){
$.onebook(src4,{language:'it'});
return false;
});
$('.links a:eq(1)').click(function(){
$.onebook(src4,{border:100, skin:'light', pageColor:'#60baaa', bgLight:'#56998c url(i/bg.jpg)', cesh:false});
return false;
});
$('.links a:eq(2)').click(function(){
$.onebook(src3,{slope:1, skin:'dark', startPage:4, border:10, flip:'basic', cesh:false});
return false;
});
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>更多源码：<a href="http://www.96flw.com/" target="_blank">www.96flw.com</a></p>
</div>
</body>
</html>
HTML5兼容电脑手机端3D翻页电子书特效.zip
版权申诉
127 浏览量
2023-09-27
22:11:50
上传
评论 1
收藏 1.25MB ZIP 举报
HTML5兼容电脑手机端3D翻页电子书特效.zip （52个子文件） 
ga04 
009.jpg 29KB 005.jpg 29KB 003.jpg 31KB 010.jpg 40KB 008.jpg 35KB 006.jpg 43KB 002.jpg 22KB 004.jpg 25KB 007.jpg 29KB 001.jpg 35KB ga02 009.jpg 57KB 005.jpg 44KB 011.jpg 49KB 003.jpg 45KB 010.jpg 53KB 008.jpg 49KB 006.jpg 52KB 002.jpg 49KB 004.jpg 45KB 007.jpg 52KB 001.jpg 39KB 012.jpg 30KB js 
three.min.js 414KB jquery.onebook3d-2.3.0-full.js 154KB jquery.mousewheel.min.js 3KB jquery.onebook3d-2.31-full.js 154KB jquery-1.11.0.min.js 94KB jquery.onebook3d-2.3.0-full-min.js 106KB
index2.html 4KB i bg.jpg 783B bg4.jpg 796B bg3.jpg 11KB bg2.jpg 780B css zzsc-demo.css 5KB normalize.css 2KB index.html 5KB ga03 009.jpg 40KB 005.jpg 38KB 011.jpg 44KB 003.jpg 51KB 010.jpg 44KB 008.jpg 42KB 006.jpg 41KB 002.jpg 46KB 004.jpg 39KB 007.jpg 43KB 001.jpg 32KB 012.jpg 27KB fonts icomoon.woff 1KB
icomoon.svg 2KB icomoon.eot 2KB icomoon.ttf 1KB资源评论
