Book flip in jQuery
I'm trying to make a book flip effect in jQuery, like this one
I thought it would be easy with jQuery, but when I tried to make the page turn effect, i realized that is quite complicated.
That is what i have:
SCRIPT:
<script type="text/javascript">
$(document).ready(function() {
$('#s').click(function(){
$('#flippage_0').animate({'width': '0'}, "fast", function(){
$('#flippage_1').animate({'left': '0'}, "fast");
});
});
});
</script>
HTML:
<body>
<div id="s" style="width:20px;height:20px;background-color:black;"></div>
<div id="book">
<div id="flippage_0" class="flippage" >
<div id="fliphtml_0" class="fliphtml" style="background-image:url('page0.jpg');z-index:3;">
</div>
</div>
<div id="flippage_1" class="flippage">
<div id="fliphtml_1" class="fliphtml" style="background-image:url('page1.jpg');z-index:2">
</div>
</div>
<div id="flippage_2" class="flippage">
<div id="fliphtml_2" class="fliphtml" style="background-image:url('page2.jpg');z-index:1">
</div>
</div>
</div>
</body>
CSS:
#book{
background: none repeat scroll 0 0 grey;
border-color: grey;
border-style: outset;
border-width: 2px 5px 3px 2px;
height: 361px;
position: relative;
width: 600px;
z-index: 0;
}
.flippage{
height: 361px;
left: 300px;
overflow: hidden;
position: absolute;
top: 0;
width: 300px;
}
.fliphtml{
border-color: #000000;
border-style: solid;
border-width: 0;
color: #FFFFFF;
height: 361px;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 300px;
}
I made this code to make the flip effect, but if u check it, u will see th开发者_C百科at is quite different from the effect of the link above.
I searched for a tutorial on the internet, but all i have found are plugins without any explanation of how to make it.
Can anyone help me about how to make the book flip effect?
Thanks : )
Check this out and see if it works more like what you're going for...
Demo: http://jsfiddle.net/wdm954/DkZsY/2/
EDIT: My original code was more basic but I was playing around some and added the reverse page flipping also.
$('.flippage').click(function(){
$this = $(this);
if ($(this).css('left') == '0px') {
$(this).animate({ width: '0px', left: '300px' }, 100, function(){
$this.next().width('0px').animate({
width: '300px'
}, 150);
$this.prev().animate({ width: '300px' }, 100);
// replace left side with background
$bg = $this.nextAll().eq(1).children('span').css('backgroundImage');
$('#book').css('backgroundImage', $bg);
$this.nextAll().eq(1).animate({
left: '0px',
width: '300px'
}, 100, function() {
$('#book').css('backgroundImage', 'none');
});
});
}
else {
if ($this.index() == 0) {
//if last page (technically first div) then do nothing
}
else {
$(this).animate({ width: '0px' }, 100, function(){
$this.prev().width('1px').animate({
left: '0px',
width: '300px'
}, 100);
$this.next().animate({ width: '0px' }, 100);
});
}
}// end else
});
You could look at the source code for the bookflip demo you linked to: coastworx.com/bookflip.js and try to replicate the mathematics in there. Then it should look pretty much the same.
加载中,请稍侯......
精彩评论