原生JS实现拖拽翻书特效
给大家分享一个用原生JS实现的拖拽翻书效果图，效果如下：
效果还不错吧，当然还需要两个图片。
1.书本封面。
2.书页
实现代码如下，欢迎大家复制粘贴。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS实现拖拽翻书特效</title>
<style>
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;
}
</style>
</head>
<body>
<div id="book">
<canvas id="pageflip-canvas"></canvas>
<div id="pages">
<section>
<div>
<h2>History</h2>
<p>
Canvas was initially introduced by Apple for use inside their own Mac OS X WebKit component,
powering applications like Dashboard widgets and the Safari browser. Later, it was adopted by
Gecko browsers and Opera and standardized by the WHATWG on new proposed specifications for next
generation web technologies.
</p>
</div>
</section>
<section>
<div>
<h2>Usage</h2>
<p>
Canvas consists of a drawable region defined in HTML code with height and width attributes.
JavaScript code may access the area through a full set of drawing functions similar to other
common 2D APIs, thus allowing for dynamically generated graphics. Some anticipated uses of
canvas include building graphs, animations, games, and image composition.
</p>
</div>
</section>
<section>
<div>
<h2>Reactions</h2>
<p>
At the time of its introduction the canvas element was met with mixed reactions from the web
standards community. There have been arguments against Apple's decision to create a new
proprietary element instead of supporting the SVG standard. There are other concerns about
syntax e.g. the absence of a namespace.
</p>
</div>
</section>
<section>
<div>
<h2>Support</h2>
<p>
The element is currently supported by the latest versions of Mozilla Firefox, Google Chrome,
Safari, and Opera. It is not natively implemented by Internet Explorer (IE) as of version 8,
though support is in development for Internet Explorer 9; however, many of the Canvas element's
features can be supported in IE, for example by using Google or Mozilla plugins, JavaScript
libraries and either Adobe Flash or IE's proprietary VML.
</p>
</div>
</section>
</div>
</div>
<script type="text/javascript" src="js/index.js"></script>
</body>
<html>以下上面代码中引入的index.js代码，为核心代码。
(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");
// List 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();
}
})();本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019/08/11 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
