impress.js_与Impress.js和Impressr同步基于Web的演示幻灯片[Quicktip]
我已经在几所大学和学校中进行了有关Web开发和WordPress的讨论,在演讲中我遇到的一个常见问题是,靠近人群的观众几乎看不到我的幻灯片。 我对此进行了思考:如何使演示幻灯片更清晰,而演讲者和与会人员却保持同一页面?
我找到了一个解决方案,可以让观众在自己的设备上观看演示幻灯片,以及一种使设备上的幻灯片内容与我想在舞台上浏览的内容同步的方法。 这是这样做的方法。
制作幻灯片
但是,为此,我们需要使用Impress.js代替Keynote或PowerPoint创建幻灯片。
Impress.js允许您创建基于Web的演示幻灯片,并且它附带的动画效果比在Keynote或PowerPoint上可以找到的效果更令人印象深刻。 实际上,如果您是CSS3精通者,则可以创建自己的自定义动画( 在此处尝试演示 )。
“但是,如果我不了解CSS,JavaScript和HTML怎么办?”
然后,您可以使用Strut (基于Web的应用程序)通过GUI创建Impress.js幻灯片 。 该应用目前仍处于测试阶段,但运行良好。 您可以通过拖放来插入文本,图像或视频,类似于Keynote或PowerPoint。 您还可以更改背景,颜色,字体系列及其大小。
完成演示幻灯片的创建后,您可以单击右侧带有Impress的绿色大按钮。 然后按Command + S (在Windows中为Ctrl + S )保存幻灯片。
同步幻灯片
现在,我们将使幻灯片同步。 使用Impress.js构建幻灯片的想法是允许在便携式计算机或移动设备上访问幻灯片。 观众也可以近距离观看,甚至可以与幻灯片互动。 当您浏览幻灯片时,对幻灯片所做的更改(例如移至下一张幻灯片)将实时反映在其设备上。
为此,您需要一个名为Impressr.jsJavaScript库。 这个图书馆是两年前出版的。 即使这样,它仍然可以正常工作,并且非常易于使用。 下载库,然后在head
标签内添加以下内容。
<script src="js/jquery.signalR.js"></script>
<script src="js/jquery.signalRamp.js"></script>
<script src="js/jquery.impressR.js"></script>
然后,添加以下内容以初始化Impressr。
$("#slide-container").impressR({proxyName: 'presentation'
});
确保选择正确的元素立即包裹幻灯片。 只要是字符串(纯文本), proxyName
选项就可以设置为任何值。
现在,在演示文稿打开的情况下,幻灯片应在每个设备上实时同步 。 请注意,所有设备都必须连接到同一网络 。 要对其进行测试,可以在两个不同的浏览器中打开幻灯片。 在这里,作为示例,我在Chrome和Firefox中打开了幻灯片。
您也可以在移动设备上尝试。
翻译自: https://www.hongkiat.com/blog/sync-presentation-slides-impressr-js/
impress.js_与Impress.js和Impressr同步基于Web的演示幻灯片[Quicktip]相关推荐
- node.js+Express计算机毕业设计基于Web的软考题库平台(程序+LW+部署)
该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程.欢迎交流 项目运行 环境配置: Node.js+ Vscode + Mysql5.7 + HBuilderX+Navicat11+Vue ...
- JS笔记(20): JS中的同步编程和异步编程
铺垫:关于定时器 定时器:设定一个定时器,并且设定了等到的时间,当到达指定的时间,浏览器会把对应的方法执行 1)常用的定时器 1.setTimeout(function,intarval) 执行一次 ...
- await原理 js_深入浅出node.js异步编程 及async await原理
最近看了一些文章对于async await的原理及概念的解析,我觉得很多时候有些不太准确. 尤其是对于async和await会阻塞线程的说法更是有些扯淡了,JS本身就是单线程的语言如果await会阻塞 ...
- js异步和同步的区别
js异步和同步的区别 一.单线程和异步: dom渲染中js必须停止,js进行过程中dom渲染必须停止 单线程是异步出现的一个背景 二.异步和同步: 异步的例子,在定时器1s内,会输出300 而在同步中 ...
- js文件 本地 上传服务器地址,js 本地文件同步服务器地址
js 本地文件同步服务器地址 内容精选 换一换 用户可以将本地NAS存储中的数据,通过云专线迁移至云上SFS Turbo文件系统中,进行云上业务拓展.此方案通过在云上创建一台Linux操作系统的云服务 ...
- 如何理解js中的同步和异步
首先需要理解:JS是单线程运行的 同步和异步,无论如何,做事情的时候都是只有一条流水线(单线程),同步和异步的差别就在于这条流水线上各个流程的执行顺序不同. 同步就是程序按照正常的执行顺序,依次执行 ...
- [OHIF-Viewers]医疗数字阅片-医学影像-cornerstone-core-Cornerstone.js提供了一个完整的基于Web的医学成像平台。...
[OHIF-Viewers]医疗数字阅片-医学影像-cornerstone-core-Cornerstone.js提供了一个完整的基于Web的医学成像平台. 还必须写中文,不然不让同步,蛋疼呀--- ...
- node.js基于web的游戏网站毕业设计源码031726
游戏网站的设计 摘 要 基于网络游戏的蓬勃发展,游戏网站发挥着吸引玩家和提高玩家之间的互动性的重要作用,因而,建设了一个以游戏为中心的游戏官网. 该游戏提供了一个大型的玩家交流互动平台,包括用户管理. ...
- Reveal.js一个用来做WEB演示文稿的框架
reveal.js是一个能够帮助我们很轻易地使用HTML来创建漂亮的演示效果,也就是我们常见的PPT幻灯片.reveal.js不依赖其他任何javascript库,是一个独立的javascript插件 ...
最新文章
- 清华自动驾驶前沿报告!解密六大关键技术,全球人才分布【附下载】| 智东西内参...
- C++文件如何在linux下生成动态库So,以及如何使用这个动态库
- 如果某一运行的服务在/var/lock/subsys
- OpenCV捕获视频和摄像头
- 您没有权限来打开应用程序_苹果建议:除非应用程序无响应,否则不要滑动强制退出...
- Jmeter之逻辑控制器操作
- Python零基础教程:函数和类内建魔法属性
- 数据结构与算法之归并排序
- linux下 mysql 忘记root用户密码解决办法
- PyRun_SimpleString的无穷怨念
- 怎么批量修改html文件后缀,怎么批量修改文件后缀
- eplan连接定义点不显示_EPLAN电气图实例--控制柜(控制面板)
- 人工智障学习笔记——深度学习(2)卷积神经网络
- LeetCode 38. Count and Say
- 【原创】使用blockUI制作自定义的漂亮的网页提示框(代替confirm和alert)
- SpringBoot的C2C水果商城系统
- Fedora 9 vmware 上网问题
- 思考伯努利试验的两种组合思想
- 复制-粘贴-剪切(深入Vim寄存器)Vim寄存器
- App开发者不再遵循苹果iOS设计惯例
热门文章
- Windows SOCKET 缓存/缓冲区 相关了解 (socket好文)
- vxe-table 表格里每行的项的下拉选项不同的处理方式
- [元带你学: eMMC协议 7] eMMC 概述 与 eMMC总线协议
- python iocp_IOCP浅析
- 写一个HTML的关于新年倒计时的有烟花绽放,还有名字的,转换为网站
- VS2010连接数据库时,发现没有oleDbCommand或oleDbConnection控件
- 物理学专业英语(写作整理)01
- 怎么升级计算机硬盘,电脑升级之硬盘篇:给电脑升级硬盘也有讲究,否则换了也白搭...
- Spark block和partition的区别
- Stunnel使用2