jquery仿PPT幻灯片特效插件ppt.js

news/2024/11/29 2:47:16/文章来源:https://www.cnblogs.com/mybook000/p/18570484

ppt.js是一款jquery仿PPT幻灯片特效插件。该jquery插件基于jquery来显示图片翻页效果,可全屏显示,以及自定义图片的宽度和高度。

 

演示    下载

 使用方法

在页面中引入jquery和ppt.js文件,以及字体图标文件iconic和插件样式文件ppt.css。

<link rel="stylesheet" href="css/ppt.css">
<link rel="stylesheet" href="icon-font/style.css">
<script src="js/jquery.min.js"></script>
<script src="js/ppt.js"></script>                 
 HTML结构

该使用一个<div>作为ppt幻灯片的容器:

<div id="testppt">
 
</div>           
 初始化插件

在页面DOM元素加载完毕之后,可以通过ppt()方法来初始化该插件。

$("#testppt").ppt();          

你还可以指定ppt的宽度和高度。

$("#testppt").ppt({
  width:800,
  height:600
});          

可以通过imageUrl参数来指定幻灯片的图片。

$("#testppt").ppt({
    imageUrl:[
          { src: 'img/ppt-1.jpg' },
          { src: 'img/ppt-2.jpg' },
          { src: 'img/ppt-3.jpg' },
          { src: 'img/ppt-4.jpg' },
          { src: 'img/ppt-5.jpg' }
    ]
});          

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

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

相关文章

性能指标详解

一、监听器中的插件 @gc - Active Threads Over Timeip 活动线程时间 @gc - AutoStop Listener 自动停止侦听器 @gc - Bytes Throughput Over Timejp 字节吞吐量随时间变化 @gc -Composite Graph 综合图 @gc - Connect Times Over Timejp 连接时间 @gc -Console Status Loggerj…

leetcode78 子集

leetcode78 子集思路:深度优先搜索回溯 分析此类问题可以先用树形结构模拟代码逻辑。那么根据这个解答树,首先我们的回溯搜索函数应该由这么几部分组成将搜索获得的答案加入到res中。 for循环遍历搜索下一个元素(比如在初始列表为空的时候,第一位可以选1,2,3显然需要通过…

bootstrap模态窗口美化特效

这是一款bootstrap模态窗口美化特效。该特效在原生bootstrap模态窗口的基础上,通过添加自定义的CSS样式,制作出效果非常炫酷的模态窗口。演示 下载使用方法 在页面中引入下面的文件。<link rel="stylesheet" href="http://jrain.oscitas.netdna-cdn.com…

重温经典,一网万游:在线红白机FC游戏平台:webgame.one

还记得小时候守在电视机前,手握红白机手柄,沉浸在《魂斗罗》紧张刺激的战斗、《超级马里奥兄弟》奇妙的冒险世界,或是与小伙伴一起在《坦克大战》里并肩作战的美好时光吗?那些经典的 FC 游戏,承载着我们童年最纯真的快乐与回忆。如今,有一个名为 https://webgame.one 的在…

明火识别视频分析服务器烟雾识别小区住宅智慧消防场景方案

随着城市化进程的加快和科技的不断进步,燃气安全和消防安全已成为城市安全管理的重要组成部分。为了响应国家政策的号召,提升城镇燃气安全水平,以及加强高层民用建筑的消防安全管理,迫切需要一套科学、高效的技术解决方案来应对当前的挑战。 本文将详细介绍如何利用明火识别…

vue2 数据导入excel

1、安装 npm install xlsx一、前端<el-uploadstyle="display: inline-block"actionaccept=".xlsx, .xls":auto-upload="false":show-file-list="false":on-change="handleUpload"><el-button type="primary&q…

小迪安全第10天HTTP数据包

请求包:request 回显包:response (1)请求方式:post get get:提交请求 post:向指定资源提交内容,登录/上传文件 •get:向特定资源发出请求(请求指定页面信息,并返回实体主体); •post:向指定资源提交数据进行处理请求(提交表单、上传文件),又可能导致新的资源的…

《安富莱嵌入式周报》第346期:开源2GHz带宽,12bit分辨率,3.2Gsps采样率示波,开源固件安全分析器, 开源口袋电源,开源健康测量,FreeCAD

周报汇总地址:http://www.armbbs.cn/forum.php?mod=forumdisplay&fid=12&filter=typeid&typeid=104 视频: https://www.bilibili.com/video/BV1TYBhYKECK/目录: 1、开源2GHz带宽,12bit分辨率,3.2Gsps采样率示波器 2、开源嵌入式固件安全分析器 3、TI分享的8…

【前端】vue引入tinymce富文本编辑器上传视频自动转img问题

近期遇到了一个问题,前端项目引入tinymce富文本编辑器后有一个上传视频的需求,可是放入了视频以后,在预览时发现,视频标签未能正确展示,被替换为了img标签找了很多解决办法,都没有解决这个问题,最后找到了一个办法, 特此记录。 解决办法: 1. 找到node_modules下tinymc…

【操作系统】2.3_11_ 哲学家进餐问题

https://www.bilibili.com/video/BV1YE411D7nH?spm_id_from=333.788.videopod.episodes&vd_source=6c2daed6731190bb7d70296d6b9746bb&p=36方法1 n个哲学家,n个筷子 创建一个初值为n-1的信号量,保证最多只有n-1个进程并发争抢资源,必有1个筷子资源余留,可以1个进程…

PhpWebStudy运行Laravel

创建Laravel项目​ 如果你想使用已存在的项目. 你可以跳过此步骤. 继续 创建站点 你可以使用Composer创建Laravel项目 shell composer create-project laravel/laravel example-app当然,FlyEnv也提供了快速创建laravel项目的方法。在站点面板中. 点击 新建项目选择项目保存位置…