建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

in spire.js 精益的,可入侵的,可扩展的HTML幻灯片演示框架

来源:易助科技网浏览量:34收藏

简介


inspire.js是一个精简的、可入侵的、可扩展的滑动平台框架。只需编写HTML和CSS就可以创建基本的幻灯片,用JS可以添加更多效果酷炫的自定义内容!


更多 HTML 演示插件:👉  [ 详情 ]


精益的,可入侵的,可扩展的HTML幻灯片演示框架框架ipire.js



用法简介


将blank.html复制(并重命名)到某个位置;

同时复制talk.css、theme.css;

添加您自己的内容;

在talk.css中添加特定通话风格。


如果您正在使用CSSS(之前称为CSSS),并且希望继续使用它,请运行 [ gitcheckout v1.0.0 ] 并继续使用。


从CSSS迁移


几乎所有的HTML语法都是一样的!相同的JS事件仍然被激发。所以,很少有东西会断裂。

幻灯片.css现在是inspire.css。

slide.js现在是inspire.js。

你不需要运行JS来创建幻灯片,它是自动创建的。

SlideShow JS类现在是Inspire。

幻灯片JS变量现在是Inspire。

除非至少有一个class=“演示者笔记”项目,否则不会加载演示者视图。

CSS控件插件现在不见了。如果您需要此功能,请使用Mavo。

CSS Snippets插件现在不见了。我们很快就会添加一个更好的,基于中的实时演示脚本提取的https://github.com/leaverou/talks.

Incrementale不再是一个插件。使用中的单独脚本https://github.com/leaverou/incrementable.

reusable.css现在已经合并到默认主题theme.css中。

数据导入现在是数据插入。


加载任何导入后运行代码


await Inspire.importsLoaded;
// code to run after imports have loaded


请注意,wait需要位于异步函数内部,否则会出错。然而,这可能只是一个自执行的异步函数。


加载特定插件后运行代码


await Inspire.importsLoaded;
await Inspire.plugins.loaded.PLUGIN_ID.loaded;
// code to run after the plugin with id PLUGIN_ID has loaded and executed


或者


await Inspire.loadPlugin(PLUGIN_ID);
// code to run after the plugin with id PLUGIN_ID has loaded and executed


第二个例子将加载插件,如果它没有被加载,但如果它永远不会被加载两次。


显示特定幻灯片时运行代码


您可以通过滑动(slidechange)更改挂钩执行此操作:


Inspire.hooks.add("slidechange", env => {
	if (Inspire.currentSlide.id === "slide-id") {
		// Code to run
	}
});


或者通过事件:


document.addEventListener("slidechange", evt => {
	if (Inspire.currentSlide.id === "slide-id") {
		// Code to run
	}
});


首次显示特定幻灯片时运行代码


您可以通过滑动(slidechange)更改挂钩执行此操作:


Inspire.hooks.add("slidechange", env => {
	if (Inspire.currentSlide.id === "slide-id" && env.firstTime) {
		// Code to run
	}
});


或者通过事件:


document.addEventListener("slidechange", evt => {
	if (Inspire.currentSlide.id === "slide-id" && evt.firstTime) {
		// Code to run
	}
});


或者:


$("#slide-id").addEventListener("slidechange", evt => {
	// Code to run
}, {once: true});


显示特定幻灯片后运行代码


您可以通过滑动(slidechange)更改挂钩执行此操作:


Inspire.hooks.add("slidechange", env => {
	if (env.prevSlide.id === "slide-id") {
		// Code to run
	}
});


或者通过事件:


document.addEventListener("slidechange", evt => {
	if (evt.prevSlide.id === "slide-id") {
		// Code to run
	}
});



相关链接


官网地址 :  https://inspirejs.org/

GitHub 地址 :  https://github.com/LeaVerou/inspire.js

易助科技网效果演示地址:  http://demo.easyzone.net.cn/plugin/inspire/blank.html