一个好用的轮子 turn.js 实现仿真翻书的效果

官网链接

www.turnjs.com/

引入Turn.js库和依赖的jQuery库

html部分实现

<div id="book">
	<div style="background-image:url(pages/01.jpg);">
		<div class="content">第一页</div>
	</div>
	<div style="background-image:url(pages/02.jpg);">
		<div class="content">第二页</div>
	</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>

CSS部分实现

• 配置.turn-page的background-color非常必要，他可以使翻书效果更逼真

#book{
	width:100vw;
	height:100vh;
	
}
#book .turn-page{
	background-color:#ccc;
	background-size:100% 100%;
}

JS部分实现

$(window).ready(function() {
    $('#book').turn({
        display: 'single',
        acceleration: true,
        gradients: !$.isTouch,
        elevation:50,
        when: {
            turned: function(e, page) { }
        }
    });
	});
	
	
    $(window).bind('keydown', function(e){
        if (e.keyCode==37)
                $('#book').turn('previous');
        else if (e.keyCode==39)
                $('#book').turn('next');

    });

效果展示网站

world.qq.com/act/a202509… （移动端访问）