html书本翻页特效,jQuery书本翻页特效

这是一款支持移动触摸的jQuery书本翻页特效。该特效通过简单的css和js代码，既可以生成书本或杂志翻页的炫酷3D特效。

使用方法

在页面中引入下面的文件。

HTML结构

Book/Page Flip Effect

A tiny jQuery script to create a mobile-friendly 3D page flip effect.

– 1 –

Page 1

– 2 –

Page 2

– 3 –

Page 3

– 4 –

Page 4

– 5 –

Page 5

JavaScript

var currentPage = 0;

$('.book')

.on('click', '.active', nextPage)

.on('click', '.flipped', prevPage);

$('.book').hammer().on("swipeleft", nextPage);

$('.book').hammer().on("swiperight", prevPage);

function prevPage() {

$('.flipped')

.last()

.removeClass('flipped')

.addClass('active')

.siblings('.page')

.removeClass('active');

}

function nextPage() {

$('.active')

.removeClass('active')

.addClass('flipped')

.next('.page')

.addClass('active')

.siblings();

}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！