扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 精选 >impress.js表现层框架的示例分析
  • 910

0
分享到

impress.js表现层框架的示例分析

2023-06-08 04:06:24 910人浏览 独家记忆
摘要

这篇文章主要介绍impress.js表现层框架的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！------------------正文分割线------------------ 概述 如果你已经厌烦了使用Po

这篇文章主要介绍impress.js表现层框架的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！


------------------正文分割线------------------
概述
如果你已经厌烦了使用PowerPoint制作PPT，那么impress.js是一个非常好的选择，用它做的PPT更加直观，效果也非常的不错。装X是需要一定代价的，不过如果你是个前端爱好者那么一切就没问题了。当然如果你能勉强明白html和CSS也没问题，看看这篇文章 + 一点点实践（把官网上的例子拿来改改）即可...
impress.js 是国外一位开发者受 Prezi 启发，采用 css3 与 javascript 语言完成的一个可供开发者使用的表现层框架(演示工具)。现在普通开发者可以利用 impress.js 自己开发出类似效果的演示工具，但性能比基于 FLASH 的 Prezi 更优。其功能包括画布的无限旋转与缩放，任意角度放置任意大小的文字，CSS3 3D 效果支持等。同时，也支持传统 PowerPoint 形式的幻灯演示。
目前 impress.js 是基于 WEBkit 浏览器（Chrome、Safari）开发，而在其它基于非 webkit 引擎，但支持 CSS3 3D 的浏览器也能正常运行。
impreess源码已经发布在GitHub上，地址：https://github.com/bartaz/impress.js
官方demo地址：Http://bartaz.github.com/impress.js
因为在其项目网页中却没有找到说明文档&使用文档，所以这篇文章将一步一步创建一个较初级的演示文稿，我们接着往下走。
请准备好现代浏览器：Google Chrome(效果最佳)、Safari或FF.
*我的IE10不支持，不知道为什么很多资料上写着IE10也能支持，背了个催。

配置
HTML5页面结构先准备就绪
创建一个id="impress"的wrapper(载体)，直接div就好，其他标签同样也可以
在body标签结束前引入impress.js文件并且调用
class="impress-not-supported"是当浏览器不支持时显示给用户的提示信息，降级处理你懂的，不多解释哈

代码如下:


<!doctype html>
<html>
<head>
<title>darren - Impress demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="http://bartaz.github.com/impress.js/css/impress-demo.css" rel="stylesheet" />
</head>
<body>
<div class="impress-not-supported">
</div>
<div id="impress">
</div>
<script src="http://bartaz.github.com/impress.js/js/impress.js"></script>
<script>impress().init();</script>
</body>
</html>


在wrapper内创建一个幻灯片只需要新建一个class="step"的<div>即可。<div>的id可有可无，当有id时url中的hash变化是随着id走；反之就是step-[num]，如

代码如下:


<div class="step">
first slide
</div>


数据属性：用来描述幻灯片大小，切换等效果。
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轴旋转多少度。

创建
数据属性那段是你接下来需要重点打交道的，接下来开始step by step创建一个演示文稿。
从一个初始的幻灯片开始，这个幻灯片已将它data-x和data-y数据属性设置为0，所以会出现在页面的中间。

代码如下:


<div class="step" data-x="0" data-y="0">
This is slide 1 - 【标题】
</div>


第二个幻灯片的data-x值为500、data-y值为0，活动的时候它将会向左平移(滑动)500px的地方。

代码如下:


<div class="step" data-x="500" data-y="-400">
This is slide 2
</div>


第三张幻灯片其data-x值不变，data-y位置为-400，这将会是从顶部400px处滑入屏幕。

代码如下:


<div class="step" data-x="500" data-y="-400">
This is slide 3
</div>


第四张幻灯片来个新花样，使用data-scale的值控制其缩放大小。data-scale="0.5"表示着它应该是一半的尺寸，当它变成活动的演示时将通过必需的倍数调节所有幻灯片的缩放尺寸，从这一步绚丽开始起步

代码如下:


<div class="step" data-x="500" data-y="-800" data-scale="0.5">
This is slide 4
</div>


第五张幻灯片旋转属性允许你旋转一个幻灯片到当前视图，幻灯片5被设置旋转90度，视觉效果微叼哈

代码如下:


<div class="step" data-x="0" data-y="-800" data-rotate="90">
This is slide 5
</div>


第六张幻灯片开始3D style，可为每个维度的轴指定旋转属性(x,y,z)。x轴是横轴，意思是你可使事物倾斜(正值)或向后(负值)，y轴是竖轴，所以你可使事物向左摇摆(负值)或向右(正值)，z轴是纵轴，这将是旋转的东西向上（负值）和向下（正值）。

代码如下:


<div class="step" data-x="-1200" data-y="0"
data-rotate-x="30" data-rotate-y="-30" data-rotate-z="90" data-scale="4">
This is slide 6
</div>


以上6张幻灯片把数据属性内的值都过了一遍，一张略high的演示文稿就呈现在我们眼前。你可以以你的想象力用不可思议的和令人惊奇的方式合并这些效果来创建你自己的幻灯片展示风格。
全局预览
个人超赞这个视觉体验，把所有的幻灯片都平行的展示，排列的合理会非常帅气，使用方式就是在幻灯片6后面插入一段html.

代码如下:


<div id="overview" class="step" data-x="-200" data-y="-500" data-scale="3"></div>


随着你幻灯片位置的不同所以全局预览的值也会不一样，拿着结尾处的demo一点一点调整找感觉，希望你会喜欢！
完成后请记住它，用它做的不只局限于此，唯一的限制是你的创造力！

个人体会
正因为我们是前端，所以用前端技术做做各种尝试没什么不好，impress更可以让我们的演示文稿更有新意，所以简单了解下绝对是值得的，学习是最好的投资。
优点：
个人非常喜欢overview的功能
因为HTML+CSS都需要自己完成，位置和效果都得自己经手，视觉效果都由自己掌控
在我用过的同类产品中视觉效果最绚，CSS3+3D效果，直接给观众看晕:)
缺点：
impress在视觉表现上确实非常强大，比起同样做演示文稿的 html5slides 和 deck.js， impress.js的复杂度上高了不少，而且如果想把演示文稿排版的好看可能需要花掉大量的时间.
*如果闲impress麻烦的朋友可以去看看 html5slides 和 deck.js的资料，视觉效果会稍差一些，不过上手会简单不少。
不要把3D和旋转用得太花哨、太绚，看的人会晕，恰当就好哈

以下是demo代码，初学者自己动手多改改感觉就好了。

代码如下:


<!doctype html>
<html>
<head>
<title>darren - Impress demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="http://bartaz.github.com/impress.js/css/impress-demo.css" rel="stylesheet" />
</head>
<body>
<div class="impress-not-supported">
<div class="fallback-message">
<p>你的浏览器<b>不支持</b> impress.js, 所以当前展示的是简化版。</p>
<p>为了获得更好的体验，请使用最新的 <b>Chrome</b>, <b>Safari</b> 或者 <b>Firefox</b> 浏览器。</p>
</div>
</div>
<div id="impress">
<div class="step" data-x="0" data-y="0">
Darren code - [标题]
</div>
<div class="step" data-x="500" data-y="0">
This is slide 2
</div>
<div class="step" data-x="500" data-y="-400">
This is slide 3
</div>
<div class="step" data-x="500" data-y="-800" data-scale="0.5">
This is slide 4
</div>
<div class="step" data-x="0" data-y="-800" data-rotate="90">
This is slide 5
</div>
<div class="step" data-x="-1200" data-y="0" data-rotate-x="30" data-rotate-y="-30" data-rotate-z="90" data-scale="4">
This is slide 6
</div>
<!-- darren code -->
<div id="overview" class="step" data-x="-200" data-y="-500" data-scale="3"></div>
</div>
<script src="http://bartaz.github.com/impress.js/js/impress.js"></script>
<script>impress().init();</script>
</body>
</html>

以上是“impress.js表现层框架的示例分析”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网精选频道！

--结束END--

本文标题: impress.js表现层框架的示例分析

本文链接: https://lsjlt.com/news/251693.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • impress.js表现层框架的示例分析
    这篇文章主要介绍impress.js表现层框架的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！------------------正文分割线------------------ 概述 如果你已经厌烦了使用Po...
    99+
    2023-06-08
  • C++string底层框架的示例分析
    小编给大家分享一下C++string底层框架的示例分析，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！一、 前言主要说明浅拷贝和深拷贝的优缺点，以及仿写string类的逻辑并分析实现过程二、 浅拷贝与深拷贝优缺点1. 浅拷贝...
    99+
    2023-06-25
  • SSM框架下各层的示例分析
    这篇文章给大家分享的是有关SSM框架下各层的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。SSM框架SSM框架是spring MVC ，Spring和Mybatis框架的整合，是标准的MVC模式，将整个系...
    99+
    2023-06-29
  • 持久层ORM框架中Hibernate框架的示例分析
    这篇文章主要介绍了持久层ORM框架中Hibernate框架的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。前言hibernate的概念：hibernate是一个orm...
    99+
    2023-06-25
  • layer弹出层框架alert与msg的示例分析
    小编给大家分享一下layer弹出层框架alert与msg的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！layer至今仍...
    99+
    2024-04-02
  • Flask框架的示例分析
    这篇文章主要介绍Flask框架的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！对于python中的框架来说，虽然有一些大型的框架可以供我们挑选，但有时候我们处理数据用不到那么难的框架，这样反而会增加处理数据的...
    99+
    2023-06-14
  • SSM框架的示例分析
    这篇文章主要为大家展示了“SSM框架的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“SSM框架的示例分析”这篇文章吧。SSM图示流程：Spring核心：Java反射Mybatis：动态代...
    99+
    2023-06-15
  • SpringMVC框架的示例分析
    小编给大家分享一下SpringMVC框架的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！简介SpringMVC采用模型(Model)-视图(View)-控...
    99+
    2023-06-02
  • CSS框架sass的示例分析
    这期内容当中小编将会给大家带来有关CSS框架sass的示例分析，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。sass结尾的文件有着更严格的格式要求，scss文件更贴近原生...
    99+
    2024-04-02
  • html中框架的示例分析
    小编给大家分享一下html中框架的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！ 框架是什么？框架就是在一个窗口可以显...
    99+
    2024-04-02
  • MINA框架的视图层和逻辑层实例分析
    本篇内容主要讲解“MINA框架的视图层和逻辑层实例分析”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“MINA框架的视图层和逻辑层实例分析”吧!1. 开篇导言    目标用户：...
    99+
    2023-06-26
  • CSS框架开发的示例分析
    这期内容当中小编将会给大家带来有关CSS框架开发的示例分析，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。　Philip Walton 在AppFolio担任前端工程师，他...
    99+
    2024-04-02
  • 使用flexible.js框架的示例分析
    这篇文章主要介绍使用flexible.js框架的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！基本概念1、视窗viewport可能写过移动端的朋友就知道viewport是什么...
    99+
    2024-04-02
  • php开发框架的示例分析
    这篇文章给大家分享的是有关php开发框架的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。1、LaravelLaravel是一款免费并且开源的PHP应用框架，它是为开发基于MVC的WEB应用而设计的，个人觉...
    99+
    2023-06-14
  • php中laravel框架的示例分析
    这篇文章主要介绍了php中laravel框架的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。laravel的安装首先安装laravel之前要安装composer，如果...
    99+
    2023-06-15
  • PHP之CI框架的示例分析
    这篇文章将为大家详细讲解有关PHP之CI框架的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。一、前言CodeIgniter 是一个简单快速的PHP MVC框架。EllisLab 的工作人员发布了 ...
    99+
    2023-06-20
  • SimpleCommand框架ImageLoader API的示例分析
    这篇文章主要介绍SimpleCommand框架ImageLoader API的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！在ImageLoader中有以下几个不同的构造器： public ...
    99+
    2023-05-30
    simplecommand imageloader
  • java框架整合的示例分析
    java框架整合的示例分析，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。框架整合:Springmvc + Mybatis + Shiro（权限） + REST(服务) + We...
    99+
    2023-06-05
  • Java的ORM框架jOOQ2.0.4的示例分析
    本篇文章给大家分享的是有关Java的ORM框架jOOQ2.0.4的示例分析，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。jOOQ 2.0.4 发布，该版本引入很多源码生成的提升...
    99+
    2023-06-17
  • express.js框架中间件的示例分析
    这篇文章给大家分享的是有关express.js框架中间件的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。_express.js_作为_Node.js_的老牌框架,是现有框...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作