首页 > 其他分享 >turn.js书本翻页效果插件

turn.js书本翻页效果插件

时间:2022-08-30 22:24:57浏览次数:78  
标签:插件 翻页 11111 33333 22222 js com

 

可以制作软纸页或者硬纸页的翻页动画,可设置双页或单页展示。

 

CDN地址:CDN- turn.js (baomitu.com)

官网:Turn.js: The page flip effect in HTML5 (turnjs.com)

官方英文PDF文档:阿里云盘分享 (aliyundrive.com)

 

HTML:

<div id="flipbook">
   <div>11111</div>
   <div>22222</div>
   <div>33333</div>
</div>

 

CLASS属性

<div id="flipbook">
   <div class="hard">11111</div><!--硬纸翻页效果-->
   <div>22222</div>
   <div>33333</div>
</div>

<!--自定义书内纸张大小,style-->
<div id="flipbook">
   <div class="own-size" style="width: 200px; height: 200px;">11111</div>
   <div class="own-size" style="width: 200px; height: 200px;">22222</div>
   <div>33333</div>
</div>

 

标签:插件,翻页,11111,33333,22222,js,com
From: https://www.cnblogs.com/loiou/p/16640465.html

相关文章

  • js三级联动
    <divclass="container"><selectname=""id="hero"><optionvalue="">-请选择-</option></select><selectname=""id="skin"......
  • JS面试题一
    1、所有对象都有原型吗?并不是所有对象都有原型;比如使用Object.create()创建一个对象,我们传递一个参数,那么创建的对象的原型则会指向传递的那个对象;而不传参数,也就是创......
  • js 严格模式
    //js使用严格模式可以规范我们写代码//要启用严格模式,您只需要在JavaScript脚本的开头添加"usestrict";或'usestrict';指令即可,如下所示:<script>"usestrict";......
  • PDF.js 绘制pdf出现图片缺失
    问题:使用PDF.js绘制pdf时,偶尔出现了原本应该绘制图片的位置只出现了一部分或者空白原因:在测试环境加断点调试后发现PDF.js默认设置的最大图片maxImageSize为10241024,所......
  • PreloadJS预加载插件
     一个Javascript插件,可以管理和协调资源的加载进度。 CDN地址:https://cdn.baomitu.com/PreloadJS //实例LoadQueue类,得到实例对象queue。letqueue=new......
  • js实现 LRU 算法
    方式一:map实现classLRU{constructor(size){this.size=size;this.cache=newMap();}get(key){if(this.cache.has(ke......
  • geopandas 生成 geojson 文件
    创建GeoDataFrame 输出geojson文件importgeopandasss=np.stack((lon.flatten(),lat.flatten()),1)ss1=[Point(ss[0].tolist())foriinss]print(ss)......
  • vue.js3: 多张图片合并([email protected])
    一,安装用到的第三方库1,安装:liuhongdi@lhdpc:/data/vue/pdf/image2pdf$npmi-Svuedraggable@nextadded2packagesin11s2,查看已安装的版本:liuhongdi@lhd......
  • 页面滚动到指定位置——js中scrollIntoView()的用法
    element.scrollIntoView()参数默认为true1.什么是scrollIntoView?scrollIntoView是一个与页面(容器)滚动相关的API2.如何调用?element.scrollIntoView()参数默认为true参......
  • js -- setTimeout 实现倒计时不准确的问题
    setTimeout、setInterval属于定时触发器线程属于macrotask,它的回调会受到GUI渲染、事件触发、http请求、等的影响。所以这两个不适合做精准的定时。最好的方法是定时矫正......