原生JS實現拖拽翻書特效

這篇是給大家分享一個用原生JS實現的拖拽翻書效果，就是用鼠標按住左鍵拖拽過去。而不是移動上去的效果，當然有人評論說我分享的教程太簡單了，我只能說你太厲害了。歡迎指導交流，本人分享的教程都是面向小白們或有點基礎的人群，大神想找bug也隨時歡迎。好吧，效果如下：

效果還不錯吧，當然還需要兩個圖片。

1.書本封面

2.書頁

沒素材的同學，直接用電腦打開這篇文章，右鍵保存圖片即可。所以不用問我要了，哈哈，然後我們開始說說html結構部分。實現代碼如下

原生JS實現拖拽翻書特效

body,

h2,

p {

margin: 0;

padding: 0;

}

body {

background-color: #444;

color: #333;

font-family: Helvetica, sans-serif;

}

#book {

/* 書本封面 */

background: url("images/0.png") no-repeat;

position: absolute;

width: 830px;

height: 260px;

left: 50%;

top: 50%;

margin-left: -400px;

margin-top: -125px;

}

#pages section {

/* 書本頁 */

background: url("images/1.png") no-repeat;

display: block;

width: 400px;

height: 250px;

position: absolute;

left: 415px;

top: 5px;

overflow: hidden;

}

#pages section>div {

display: block;

width: 400px;

height: 250px;

font-size: 12px;

}

#pages section p,

#pages section h2 {

padding: 3px 35px;

line-height: 1.4em;

text-align: justify;

}

#pages section h2 {

margin: 15px 0 10px;

}

#pageflip-canvas {

position: absolute;

z-index: 100;

}

History

//每一頁的文字內容，隨便添加。

Usage

//每一頁的文字內容，隨便添加。

Reactions

//每一頁的文字內容，隨便添加。

Support

//每一頁的文字內容，隨便添加。

以下上面代碼中引入的book.js代碼，為核心代碼，這個book名字你也可以隨便定義。

(function () { // Dimensions of the whole book

var BOOK_WIDTH = 830;

var BOOK_HEIGHT = 260;

// Dimensions of one page in the book

var PAGE_WIDTH = 400;

var PAGE_HEIGHT = 250;

// Vertical spacing between the top edge of the book and the papers

var PAGE_Y = (BOOK_HEIGHT - PAGE_HEIGHT) / 2;

// The canvas size equals to the book dimensions + this padding

var CANVAS_PADDING = 60;

var page = 0;

var canvas = document.getElementById("pageflip-canvas");

var context = canvas.getContext("2d");

var mouse = { x: 0, y: 0 };

var flips = [];

var book = document.getElementById("book");

// ist of all the page elements in the DOM

var pages = book.getElementsByTagName("section");

// Organize the depth of our pages and create the flip definitions

for (var i = 0, len = pages.length; i < len; i++) {

pages[i].style.zIndex = len - i;

flips.push({

// Current progress of the flip (left -1 to right +1)

progress: 1,

// The target value towards which progress is always moving

target: 1,

// The page DOM element related to this flip

page: pages[i],

// True while the page is being dragged

dragging: false

});

}

// Resize the canvas to match the book size

canvas.width = BOOK_WIDTH + (CANVAS_PADDING * 2);

canvas.height = BOOK_HEIGHT + (CANVAS_PADDING * 2);

// Offset the canvas so that it's padding is evenly spread around the book

canvas.style.top = -CANVAS_PADDING + "px";

canvas.style.left = -CANVAS_PADDING + "px";

// Render the page flip 60 times a second

setInterval(render, 1000 / 60);

document.addEventListener("mousemove", mouseMoveHandler, false);

document.addEventListener("mousedown", mouseDownHandler, false);

document.addEventListener("mouseup", mouseUpHandler, false);

function mouseMoveHandler(event) {

// Offset mouse position so that the top of the book spine is 0,0

mouse.x = event.clientX - book.offsetLeft - (BOOK_WIDTH / 2);

mouse.y = event.clientY - book.offsetTop;

}

function mouseDownHandler(event) {

// Make sure the mouse pointer is inside of the book

if (Math.abs(mouse.x) < PAGE_WIDTH) {

if (mouse.x < 0 && page - 1 >= 0) {

// We are on the left side, drag the previous page

flips[page - 1].dragging = true;

} else if (mouse.x > 0 && page + 1 < flips.length) {

// We are on the right side, drag the current page

flips[page].dragging = true;

}

}

// Prevents the text selection

event.preventDefault();

}

function mouseUpHandler(event) {

for (var i = 0; i < flips.length; i++) {

// If this flip was being dragged, animate to its destination

if (flips[i].dragging) {

// Figure out which page we should navigate to

if (mouse.x < 0) {

flips[i].target = -1;

page = Math.min(page + 1, flips.length);

} else {

flips[i].target = 1;

page = Math.max(page - 1, 0);

}

}

flips[i].dragging = false;

}

}

function render() {

// Reset all pixels in the canvas

context.clearRect(0, 0, canvas.width, canvas.height);

for (var i = 0, len = flips.length; i < len; i++) {

var flip = flips[i];

if (flip.dragging) {

flip.target = Math.max(Math.min(mouse.x / PAGE_WIDTH, 1), -1);

}

// Ease progress towards the target value

flip.progress += (flip.target - flip.progress) * 0.2;

// If the flip is being dragged or is somewhere in the middle of the book, render it

if (flip.dragging || Math.abs(flip.progress) < 0.997) {

drawFlip(flip);

}

}

}

function drawFlip(flip) {

// Strength of the fold is strongest in the middle of the book

var strength = 1 - Math.abs(flip.progress);

// Width of the folded paper

var foldWidth = (PAGE_WIDTH * 0.5) * (1 - flip.progress);

// X position of the folded paper

var foldX = PAGE_WIDTH * flip.progress + foldWidth;

// How far the page should outdent vertically due to perspective

var verticalOutdent = 20 * strength;

// The maximum width of the left and right side shadows

var paperShadowWidth = (PAGE_WIDTH * 0.5) * Math.max(Math.min(1 - flip.progress, 0.5), 0);

var rightShadowWidth = (PAGE_WIDTH * 0.5) * Math.max(Math.min(strength, 0.5), 0);

var leftShadowWidth = (PAGE_WIDTH * 0.5) * Math.max(Math.min(strength, 0.5), 0);

// Change page element width to match the x position of the fold

flip.page.style.width = Math.max(foldX, 0) + "px";

context.save();

context.translate(CANVAS_PADDING + (BOOK_WIDTH / 2), PAGE_Y + CANVAS_PADDING);

// Draw a sharp shadow on the left side of the page

context.strokeStyle = 'rgba(0,0,0,' + (0.05 * strength) + ')';

context.lineWidth = 30 * strength;

context.beginPath();

context.moveTo(foldX - foldWidth, -verticalOutdent * 0.5);

context.lineTo(foldX - foldWidth, PAGE_HEIGHT + (verticalOutdent * 0.5));

context.stroke();

// Right side drop shadow

var rightShadowGradient = context.createLinearGradient(foldX, 0, foldX + rightShadowWidth, 0);

rightShadowGradient.addColorStop(0, 'rgba(0,0,0,' + (strength * 0.2) + ')');

rightShadowGradient.addColorStop(0.8, 'rgba(0,0,0,0.0)');

context.fillStyle = rightShadowGradient;

context.beginPath();

context.moveTo(foldX, 0);

context.lineTo(foldX + rightShadowWidth, 0);

context.lineTo(foldX + rightShadowWidth, PAGE_HEIGHT);

context.lineTo(foldX, PAGE_HEIGHT);

context.fill();

// Left side drop shadow

var leftShadowGradient = context.createLinearGradient(foldX - foldWidth - leftShadowWidth, 0, foldX - foldWidth, 0);

leftShadowGradient.addColorStop(0, 'rgba(0,0,0,0.0)');

leftShadowGradient.addColorStop(1, 'rgba(0,0,0,' + (strength * 0.15) + ')');

context.fillStyle = leftShadowGradient;

context.beginPath();

context.moveTo(foldX - foldWidth - leftShadowWidth, 0);

context.lineTo(foldX - foldWidth, 0);

context.lineTo(foldX - foldWidth, PAGE_HEIGHT);

context.lineTo(foldX - foldWidth - leftShadowWidth, PAGE_HEIGHT);

context.fill();

// Gradient applied to the folded paper (highlights & shadows)

var foldGradient = context.createLinearGradient(foldX - paperShadowWidth, 0, foldX, 0);

foldGradient.addColorStop(0.35, '#fafafa');

foldGradient.addColorStop(0.73, '#eeeeee');

foldGradient.addColorStop(0.9, '#fafafa');

foldGradient.addColorStop(1.0, '#e2e2e2');

context.fillStyle = foldGradient;

context.strokeStyle = 'rgba(0,0,0,0.06)';

context.lineWidth = 0.5;

// Draw the folded piece of paper

context.beginPath();

context.moveTo(foldX, 0);

context.lineTo(foldX, PAGE_HEIGHT);

context.quadraticCurveTo(foldX, PAGE_HEIGHT + (verticalOutdent * 2), foldX - foldWidth, PAGE_HEIGHT + verticalOutdent);

context.lineTo(foldX - foldWidth, -verticalOutdent);

context.quadraticCurveTo(foldX, -verticalOutdent * 2, foldX, 0);

context.fill();

context.stroke();

context.restore();

}

})();

想獲取軍哥更多前端小知識，點擊關注，轉發或收藏到你賬號下，省得以後需要的時候迷路。