turn.js：超酷的杂志翻页效果HTML5实现

最新推荐文章于 2021-10-29 09:14:27 发布
最新推荐文章于 2021-10-29 09:14:27 发布
阅读量968 收藏
点赞数
文章标签： javascript ViewUI
摘要: 简介：turn.js是一款基于HTML5技术用来实现纸制书翻页的jQuery插件。使用硬件加速，跨平台，容易维护，体积小。


简介：turn.js是一款基于 HTML5技术用来实现纸制书翻页的jQuery插件。使用硬件加速，跨平台，容易维护，体积小。



转自： http://www.html5cn.org/article-1817-1.html
iteye_17103
关注
html5+JS 电子杂志翻页效果
08-30
这是一个不可多得的HTML翻页效果，兼容性很强（当然，除了手机浏览器），但其效果值得学习，就两个字，专业。
HTML5电子杂志翻书动画特效.zip
07-04
HTML5电子杂志翻书动画特效是一款基于HTML5 Canvas实现的鼠标点击拖动翻页特效代码。
HTML5 杂志翻页效果
04-01
现在做的是每一页展示一张图片，可以稍做修改改成每一页展示一段代码。实现的类为JWBook, 使用时需用var book = new Book();类似这样的语句来实例话。JWBook类提供两个公共方法。prev(),next()。用于翻页。如可以直接用book.next()来实现操作书本翻前翻一页。
html5+jq模拟杂志翻页
07-08
html5+jq模拟杂志翻页 效果逼真 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- saved from url=(0070)http://www.17sucai.com/preview/3630/2014-01-20/BookPreview1/index.html --> <html xmlns="http://www.w3.org/1999/xhtml" class=" js cssanimations csstransforms3d csstransitions csstransformspreserve3d"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Book Preview with BookBlock</title> <link rel="stylesheet" type="text/css" href="./Book Preview with BookBlock_files/normalize.css"> <link rel="stylesheet" type="text/css" href="./Book Preview with BookBlock_files/demo.css"> <!--必要样式--> <link rel="stylesheet" type="text/css" href="./Book Preview with BookBlock_files/bookblock.css"> <link rel="stylesheet" type="text/css" href="./Book Preview with BookBlock_files/component.css"> <script src="./Book Preview with BookBlock_files/modernizr.custom.js"></script> </head> <body> <div id="scroll-wrap" class="container"> <div class="main"> <div id="bookshelf" class="bookshelf"> <figure class=""> <div class="perspective"><div class="book" data-book="book-1"><div class="cover"><div class="front"></div><div class="inner inner-left"></div></div><div class="inner inner-right"></div></div></div><div class="buttons"><a href="http://www.17sucai.com/preview/3630/2014-01-20/BookPreview1/index.html#">Look inside</a><a href="http://www.17sucai.com/preview/3630/2014-01-20/BookPreview1/index.html#">Details</a></div> <figcaption><h2>9 Lives <span>Andrew Hudson</span></h2></figcaption> <div class="details"> <ul> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> <li>Graham Press</li> <li>12.09.2010</li> <li>397 pages</li> </ul> <span class="close-details"></span></div> </figure> <figure class=""> <div class="perspective"><div class="book" data-book="book-2"><div class="cover"><div class="front"></div><div class="inner inner-left"></div></div><div class="inner inner-right"></div></div></div><div class="buttons"><a href="http://www.17sucai.com/preview/3630/2014-01-20/BookPreview1/index.html#">Look inside</a><a href="http://www.17sucai.com/preview/3630/2014-01-20/BookPreview1/index.html#">Details</a></div> <figcaption><h2>Life of a worm <span>Will Flores</span></h2></figcaption> <div class="details"> <ul> <li>Understanding the life of a worm can be enlightening to anybody. Dive into the micro cosmos of a creeping and burrowing invertebrate and learn how a limbless little creature reaches happiness.</li> <li>Graham Press</li> <li>12.09.2010</li> <li>397 pages</li> </ul> <span class="close-details"></span></div> </figure> <figure class=""> <div class="perspective"><div class="book" data-book="book-8"><div class="cover"><div class="front"></div><div class="inner inner-left"></div></div><div class="inner inner-right"></div></div></div><div class="buttons"><a href="http://www.17sucai.com/preview/3630/2014-01-20/BookPreview1/index.html#">Look inside</a><a href="http://www.17sucai.com/preview/3630/2014-01-20/BookPreview1/index.html#">Details</a></div> <figcaption><h2>Lemon Rainbow <span>Christa Hausmann</span></h2></figcaption>
jquery插件turn.js实现杂志翻页效果(浏览器需支持html5).zip
11-06
由于 Turn.js 基于 HTML5，因此它依赖于 HTML5 的 Canvas 和 CSS3 动画来实现翻页的视觉效果，这也就意味着在不支持这些特性的老旧浏览器中可能无法正常工作。 在使用 Turn.js 时，首先需要确保项目中已经引入了 ...
turn.js实现书本翻页效果插件
最新发布
08-27
Turn.js 是一个强大的JavaScript库，专门用于在网页上创建具有真实翻页效果的电子书或杂志样式的内容。这个插件利用HTML、CSS和JavaScript技术，为用户提供了类似于真实纸质书籍的交互体验，使得数字内容更加生动...
html5book.js:HTML5中的书籍生成器库，取自麻省理工学院许可的最新版本turn.js
05-04
它源自著名的Turn.js，一个同样致力于实现3D翻页效果的库，但HTML5book.js提供的是MIT许可的最新版本，这意味着该库可以免费用于商业和个人项目，且源代码可自由修改和分发。 在HTML5book.js的核心功能中，最重要的...
javaScript+turn.js实现图书翻页效果实例代码
12-11
为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的 很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇...
基于turn.js官网通过vue实现的一个翻页效果
11-13
基于turn.js官网通过vue实现的一个翻页效果 脚手架使用vue cli4
turn.js电子书翻页特效实例
02-27
使用turn.js实现的电子书翻页特效。鼠标移到页脚，点击拖动可以实现翻页。有硬板纸和普通纸2种纸张翻页的效果。
jquery html5手机端翻书效果_手指滑动书本翻页效果代码
03-07
jquery html5手机端翻书效果_手指滑动书本翻页效果代码
turnjs帮助文档
12-01
turnjs帮助文档
html5+css3+js超逼真翻书效果
12-13
这是一款大师级的html5翻书效果（翻页效果），这种翻书效果使用了css3 3d transform属性和少量的js来实现鼠标hover书本时，书本打开动画。注意：必须是支持css3 3d transform属性的浏览器才有效果。IE10看不到效果。
HTML5翻书效果 turnjs
bdk82924
09-04 256
简介：turn.js是一款基于HTML5技术用来实现纸制书翻页的jQuery插件。使用硬件加速，跨平台，容易维护，体积小。 作者主页：http://www.turnjs.com/# 暂时还没研究使用方法 ，要使用的话到网上搜索看看吧 应该还有类似的插件之类的 下载地址: 压缩版:http://www.turnjs.com/turn.min.js 完整版:ht...
html5电子杂志页面案例,html5电子杂志支持手机端触屏滑动翻书效果
weixin_39653764的博客
06-03 668
特效描述：html5电子杂志 支持手机端 触屏滑动 翻书效果。html5手机电子杂志，触屏滑动电子杂志翻书动画特效代码结构1. 引入JS2. HTML代码function loadApp() {// Create the flipbook$('.flipbook').turn({// Widthwidth:922,// Heightheight:600,// Elevationelevation:...
JS动态的水波荡漾湖面倒影js特效
ICode联盟
10-29 426
下载地址 JavaScript动态的水波荡漾湖面倒影特效。动态的水波荡漾，整个山水湖面倒影，适合做网页背景。 dd:
CSS贺卡翻转动画js特效
ICode联盟
09-16 144
下载地址css3绘制的贺卡样式，鼠标悬停带翻转特效。 dd:
html翻牌动画效果,js+css3翻牌动画效果
weixin_34357232的博客
06-03 606
这是一款js+css3翻牌动画效果，界面设计感不错的，喜欢可以下载哦温馨提示不兼容IE6,7,8浏览器。查看演示下载资源：16次 下载资源下载积分：20积分function () {this.currentSize = this.getSize(this.time);this.nextSize = this.getSize(this.nextTime);},getSi...
利用turn.js实现JavaScript图书翻页效果详解及源码
本篇文章详细介绍了如何利用JavaScript和turn.js技术来实现图书翻页效果。turn.js是一个用于创建交互式PDF阅读器的JavaScript库，特别适用于电子书和文档的在线查看。作者针对初学者，首先强调了turn.js虽然提供了...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值