mirror of
https://github.com/blasten/turn.js.git
synced 2025-04-06 03:57:41 +08:00
46 lines
995 B
HTML
46 lines
995 B
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
|
|
<script type="text/javascript" src="../../turn.min.js"></script>
|
|
|
|
<style type="text/css">
|
|
body{
|
|
background:#ccc;
|
|
}
|
|
#magazine{
|
|
}
|
|
#magazine .turn-page{
|
|
background-color:#ccc;
|
|
background-size:100% 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="magazine">
|
|
<div style="background-image:url(pages/01.jpg);"></div>
|
|
<div style="background-image:url(pages/02.jpg);"></div>
|
|
<div style="background-image:url(pages/03.jpg);"></div>
|
|
<div style="background-image:url(pages/04.jpg);"></div>
|
|
<div style="background-image:url(pages/05.jpg);"></div>
|
|
<div style="background-image:url(pages/06.jpg);"></div>
|
|
</div>
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
$('#magazine').bind('turned', function(e, page) {
|
|
|
|
console.log('Current view: ', $('#magazine').turn('view'));
|
|
|
|
})
|
|
|
|
$('#magazine').turn({width: 1152, height: 752, acceleration: true, shadows: !$.isTouch});
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|