HTML5翻书效果 turnjs

最新推荐文章于 2024-01-07 20:51:04 发布
最新推荐文章于 2024-01-07 20:51:04 发布
阅读量237 收藏
点赞数
分类专栏： Web 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maple82924/article/details/84283358
版权
简介：turn.js是一款基于HTML5技术用来实现纸制书翻页的jQuery插件。使用硬件加速，跨平台，容易维护，体积小。

作者主页：http://www.turnjs.com/#

暂时还没研究使用方法 ，要使用的话到网上搜索看看吧

应该还有类似的插件之类的

下载地址:

压缩版:http://www.turnjs.com/turn.min.js

完整版:https://github.com/blasten/turn.js

[img]http://dl.iteye.com/upload/attachment/0073/3103/7abe5438-1408-3c9f-a78e-7a3e53bcb19f.png[/img]
maple82924
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
turnjs 书架效果+翻书效果 参考turnjs官网示例
03-28
turnjs 书架效果+翻书效果 参考turnjs官网示例
turn.js （翻页效果）总结
顺其自然~专栏
11-23 6174
Turn.js是一个内置的jQuery翻页插件 1 html中引入 <script type="text/javascript" src="js/turn.js"></script> 2 创建html <div id="flipbook"> <div class="hard"> Turn.js </div> <div class="hard"></div> <div> Page 1 &.
记录--一个好用的轮子 turn.js 实现仿真翻书的效果
林恒的博客
07-31 1670
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 国际惯例，官网链接 官网传送门 Github地址 github上有几个demos例子，介绍了基础用法。 我参考官网的例子，写了一个demo示例 安装 turn.js 依赖 jquery 库，所以需要先安装 jquery npm install jquery --save 引入 import $ from 'jquery'...
turn.js教程及总结
热门推荐
qq_43402051的博客
04-10 1万+
先看一眼我制作的简单demo演示图 这部分主要用作演示及养眼 接下来我们来抛开演示图来讲一下如何使用 turn简介 一个基于jquery用来实现3d翻书效果的插件 使用所需 jquery.js、turn.js 这里面jquery全网一查都是, turn.js官网下载太慢了，嫌慢的码友们可以私信我或留言我会发给大家 基本用法 $('#book').turn({ acceleration: true, // 是否启动硬件加速 如果为触摸设备必须为true pages: 11, /
Vue项目结合Turn.js制作翻页动画，项目部署发布，从零到1
weixin_45941687的博客
03-17 3779
Vue项目结合Turn.js制作翻页动画，项目部署发布，从零到1 1. 书籍翻页项目 - 翻页动画，页码跳转 2. 语言 vue 2.0 ，软件 Webstorm 3. 引入了 turn.js ，用到 jquery 4. 主要：翻页、触屏放大缩小、视频首页面显示、移动端与ipad适配
Turn.js实现翻书效果
hhupp1809684284的博客
05-23 2941
trun.js的一份中文使用文档，相较于官方的文档，增加了一些自己理解的内容， 文章中展示的更多是常用的，一些本人无法理解的内容做了删减。
移动端H5开发 Turn.js实现很棒的翻书效果
10-22
主要为大家详细介绍了Turn.js实现很棒的翻书效果，对Turn.js翻书效果的实现进行总结，感兴趣的小伙伴们可以参考一下
前端实现翻书效果
12-29
根据网上demo修改，实现完全适应手机端的翻书特效，此为完整demo，下载替换图片即可使用
turnjs--Jquery图书翻页效果
05-01
turnjs--Jquery图书翻页效果
turn.js 模版简单使用
sdgjah2的博客
11-04 514
7. 只替换图片不做太大改动的话 到js文件里面 直接搜jpg 模版默认用的是jpg图片。8.这个地方的png是 点击下方滚动条显示的小图片 里面的宽高是控制小图片大小的。9.总共有多少个单张页面 从1开始 多少张单张页面在这个地方循环遍历 动态加入。5.将整个turnjs4拖拽到编辑器中 多余的文件最好等修改完以后再删除。将图片格式修改为自己图片的格式 这个地方就是图片引用的代码 动态渲染的。注：点击进入文件后里面的html文件可以直接访问。6.在页面最下方 找到引用的js文件。
turnjs帮助文档
12-01
turnjs帮助文档
turn.js实现翻书效果(自适应单双页)
10-10
TURN.JS 实现翻书效果(自适应单双页)
turn.js
yzyblog的博客
08-21 1300
中文 API 初始化参数配置选项 &lt;div id="flipbook"&gt; &lt;div class="hard"&gt; Turn.js &lt;/div&gt; &lt;div class="hard"&gt;&lt;/div&gt; &lt;div&gt; Page 1 &lt;/div&gt; &
Turn.js 实现翻书效果的学习与总结
weixin_33814685的博客
06-18 533
最近CTO给我分配了一个移动端H5开发的任务，主要功能是需要实现翻书效果，我听过主要需求后，当时是呀！！！接下来自己尝试使用fullPage.js和Swiper来实现翻书效果，结果效果都不是非常的理想，后来想起自己曾经做过PC版的翻书效果，当时使用的是Turn.js，查过其相关API后，整个人突然豁然开朗呀，使用Turn.js 完全可以解决当前我接手这个项目的所有需求呀。现在将个人的...
html5实现3d翻页效果,利用css3 3d transform制作超逼真翻书效果
weixin_35717340的博客
06-03 2259
本教程给大家带来一个非常有创意的翻书效果，使用的是css 3D transforms属性和css transitions属性。这里将给你展示两种不同的图书设计：精装书和平装书。这两种设计只需要简单的改变一些css样式、图片和其他一些小细节就可以完成。注意: 并不是所有的浏览器都支持这些css属性。精装书:精装书由三个部分组成：书的封面、书的脊柱和书的背面。每一个部分都将由伪元素来提供一些厚度。平装...
如何用html5实现翻书的动画效果
winneryy的博客
11-04 1722
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin:0; padding:0;
turnjs4学习笔记
u010609251的博客
04-05 1525
turnjs4学习笔记前言下载开始准备工作样式构造方法方法事件 前言 领导交代做一个电子书要在手机上能看，要有翻页的效果。本来想在网上直接找一个，无奈素材都要钱，巧的是发现了这个turnjs，实现了翻页的效果。学习了下，大概做个笔记，以后也方便看 make a flip book with HTML5 下载 官网： http://www.turnjs.com/ 首页download下来里面包括所需...
Turn.js 实现翻书效果
最新发布
余金兑人的技术角落
01-07 774
turn.js前端翻页组件的使用
关于翻书插件turn.js的运用
xin的博客
06-21 9099
今天给大家介绍一款好用的翻书插件，turn.js，它依赖于jQuery，话不多说，先上代码： //这里先引入两个外部cdn文件，方便打开查看效果： <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script type="text...
html5翻书轮播图
10-17
例如，使用turn.js插件可以实现一个简单的翻书效果，具体步骤如下： 1. 引入turn.js插件的js和css文件： ```html <link rel="stylesheet" href="turnjs4/lib/turn.min.css"> <script src="turnjs4/lib/turn.min.js...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值