turn.js 模版简单使用

turn.js 不修改添加原功能仅 替换、修改图片格式使用模版

HTML文件

turn.js官网:http://www.turnjs.com/#

第一步

1.点击链接去到官网  

2.点击下载按钮  下载左侧示例压缩包

3.解压完成拿到示例文件 turnjs4

4.在samples目录下案例中查看意向使用的模版样式  

        注:点击进入文件后里面的html文件可以直接访问

5.将整个turnjs4拖拽到编辑器中  多余的文件最好等修改完以后再删除

6.在页面最下方 找到引用的js文件 

7.  只替换图片不做太大改动的话  到js文件里面 直接搜jpg  模版默认用的是jpg图片

将图片格式修改为自己图片的格式  这个地方就是图片引用的代码 动态渲染的

8.这个地方的png是 点击下方滚动条显示的小图片  里面的宽高是控制小图片大小的

9.总共有多少个单张页面  从1开始  多少张单张页面在这个地方循环遍历 动态加入

就这几个地方改一下就行了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/159838.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Dubbo篇---第一篇

系列文章目录 文章目录 系列文章目录一、说说一次 Dubbo 服务请求流程?二、说说 Dubbo 工作原理三、Dubbo 支持哪些协议?一、说说一次 Dubbo 服务请求流程? 基本工作流程: 上图中角色说明: 二、说说 Dubbo 工作原理 工作原理分 10 层: 第一层:service 层,接口层,…

我的计算机启蒙书:信息学竞赛入门书提高篇

你是否曾读过一本让你欲罢不能的计算机书籍?它可能为你打开了新的技术世界大门,或者是帮助你解决了棘手的编程难题。 我从百度上搜到其相关介绍: 信息学奥赛一本通,是一本系统性、综合性的信息学竞赛教材,由著名信息学…

手机转接器实现原理,低成本方案讲解

USB-C PD协议里,SRC和SNK双方之间通过CC通信来协商请求确定充电功率及数据传输速率。当个设备需要充电时,它会发送消息去给适配器请求充电,此时充电器会回应设备的请求,并告知其可提供的档位功率,设备端会根据适配器端…

「Verilog学习笔记」异步复位的串联T触发器

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点,刷题网站用的是牛客网 分析 这道题目里我们有两个需要明确的点: 1. 什么是异步复位 2. 什么是串联的T触发器 关于第一个点,可以看我的这篇文章,已经整理好了&a…

Yolov8目标识别与实例分割——算法原理详细解析

前言 YOLO是一种基于图像全局信息进行预测并且它是一种端到端的目标检测系统,最初的YOLO模型由Joseph Redmon和Ali Farhadi于2015年提出,并随后进行了多次改进和迭代,产生了一系列不同版本的YOLO模型,如YOLOv2、YOLOv3、YOLOv4&a…

自动曝光算法(第二讲)

序言 第一章说了,自动曝光算法的目的:已知当前raw图亮度、当前曝光时间、当前增益和目标亮度,当环境光发生变化的时候,是通过控制增益、曝光时间和光圈使raw图的亮度,保持在目标亮度附近。本章想讲一下目标亮度的相关…

2023年R1快开门式压力容器操作证模拟考试题库及R1快开门式压力容器操作理论考试试题

题库来源:安全生产模拟考试一点通公众号小程序 2023年R1快开门式压力容器操作证模拟考试题库及R1快开门式压力容器操作理论考试试题是由安全生产模拟考试一点通提供,R1快开门式压力容器操作证模拟考试题库是根据R1快开门式压力容器操作最新版教材&#…

Linux中正则表达式等

grep命令:主要作用就是过滤查找文本内容 常用的选项有: -m 数字:匹配几次之后停止,按行匹配,不是按字符个数,例如 -v:取反 例如: -n:显示匹配的行号 例如: -c:仅显示匹配的行数,不显示匹配内…

万宾科技管网水位监测预警,管网水位的特点有哪些?

以往如果要了解城市地下排水管网的水位变化,需要依靠人工巡检或者排查的方式,这不仅加大了人员的工作量,而且也为市政府带来了更多的工作难题。比如人员监管监测不到位或无法远程监控等情况,都会降低市政府对排水管网的管理能力&a…

el-input输入校验插件(正则表达式)

使用方法&#xff1a;在main.js文件中注册插件然后直接在<el-input>加入‘v-插件名’ (1)在main.js文件&#xff1a; // 只能输入数字指令 import onlyNumber from /directive/only-number; Vue.use(onlyNumber); &#xff08;2&#xff09;在src/directive文件夹中 &a…

dockerfile避坑笔记(VMWare下使用Ubuntu在Ubuntu20.04基础镜像下docker打包多个go项目)

一、docker简介 docker是一种方便跨平台迁移应用的程序&#xff0c;通过docker可以实现在同一类操作系统中&#xff0c;如Ubuntu和RedHat两个linux操作系统中&#xff0c;实现程序的跨平台部署。比如我在Ubuntu中打包了一个go项目的docker镜像&#xff08;镜像为二进制文件&am…

你知道Python、Pycharm、Anaconda 三者之间的关系吗?

哈喽~大家好呀 Python作为深度学习和人工智能学习的热门语言&#xff0c;你知道Python、Pycharm、Anaconda 三者之间的关系吗&#xff1f;学习一门语言&#xff0c;除了学会其简单的语法之外还需要对其进行运行和实现&#xff0c;才能实现和发挥其功能和作用。下面来介绍运行P…