一统江湖的大前端(1)——PPT制作库impress.js-低调大师

一统江湖的大前端(1)——PPT制作库impress.js

2018-09-07 498

《一统江湖的大前端》系列是自己的学习笔记，旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库，不定期更新。如果你对前端的理解还是写写页面绑绑事件，那你真的是有点OUT了，前端能做的事情已经太多了, 手机app开发 , 桌面应用开发 , 用于神经网络人工智能的库 , 页面游戏 , 数据可视化 , 甚至 嵌入式开发 ，什么火就搞什么,绝对是专业的蹭热点小能手。

impress.js是什么

impress.js 是一款基于 css-3D 和 css动画 、受到高逼格PPT原型工具 prezi 启发而开发的演示文稿制作库,github上星星高达33k个,如果你已经厌烦了使用PowerPoint制作连自己都觉得丑的PPT，那么 impress.js 是一个非常好的选择，简洁高效逼格高。

获取impress.js库文件及官方示例请点击impress.js地址

关键API

下述api用于HTML标签属性，学习时直接对照官方代码仓中的example走一遍，看一遍示例代码，基本都能学会。

data-x = 幻灯片的x坐标
data-y = 幻灯片的y坐标
data-scale = 通过指定一个值来进行缩放，data-scale为5则将会在你幻灯片原始尺寸基础放大5倍
data-rotate = 通过一个数字度数来确定旋转你的幻灯片
data-rotate-x = 为3D用，这个数字度数是它应该相对x轴旋转多少度。（前倾/后仰）
data-rotate-y = 为3D用，这个数字度数是它应该相对y轴旋转多少度。（左摆/右摆）
data-rotate-z = 为3D用，这个数字度数是它应该相对z轴旋转多少度。

实战示例

附件中的 CSS-presentation 可通过双击文件中的index.html直接打开，是自己以前在做团队内部分享时使用 impress.js制作的幻灯片，时间较短，直接套用了官方示例并对个别细节进行了调整，放出来方便大家参考交流.

相关原理

impress.js的框架原理并不复杂，写在html标签上的属性可以通过 document.querySelector('元素名').dataset["属性名"]的方式取得其值,然后将每一张幻灯片相关的值赋值给CSS3D相关的属性，并为其设定过渡时的渐变动画即可。

CSS3D是指transition渐变，animation动画以及transform变形

微信关注我们

原文链接：https://yq.aliyun.com/articles/640218

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

JavaScript基本语法（三）

数组一.数组的概念二.数组的定义三.名词解释四.获取数组元素五.数组的赋值六.遍历数组七.冒泡排序数组一、数组的概念：所谓数组，就是将多个元素（通常是同一类型）按一定顺序排列放到一个集合中，那么这个集合我们就称之为数组。二、数组的定义方式一：通过构造函数的方式定义一个数组 var 数组名= new array(); var arr = new array();//空数组方式二：通过字面量的方式创建数组 var 数组名= []; var arr = [];//空数组三、名词解释 1、数组元素：数组中存储的每个数据，都是数组的元素。例子 var arr= [10,20,30]; //这里的10、20、30就是数组的元素 2、数组长度：就是数组的元素的个数。例子 var arr= [10,20,30]; //这个数组的长度就是3 3、数组索引（下标）：用来存储或者访问数组中的数据的，索引从0开始，到长度减1结束。例子 var arr= [10,20,30]; arr[0]=100;//设置数组中某个位置的值 //中括号里的0就是数组的索引四、获取数组元素 ...

2018-09-08

510

示例(在编写CMakeLists.txt前, 创建好src, include, lib, bin, build目录, 其中cmake ..在build目录中执行) # 一般都会先声明cmake的版本 CMAKE_MINIMUM_REQUIRED(VERSION 2.8) PROJECT(hello_world) # Release 和 Debug IF(NOT CMAKE_BUILD_TYPE) SET(CMAKE_BUILD_TYPE Release) ENDIF() # SET()用于赋值, 类似于 int a = 100 # SET(EXECUTABLE_OUTPUT_PATH ${PROJECT_SOURCE_DIR}/bin) # SET(LIBRARY_OUTPUT_PATH ${PROJECT_SOURCE_DIR}/lib) # AUX_SOURCE_DIRECTORY也是用于赋值, 只不过是特定于目录的 AUX_SOURCE_DIRECTORY(${PROJECT_SOURCE_DIR}/src SRC_DIR) # 设置头文件路径 INCLUDE_DIRECTORI...

2018-09-08

528

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。