jQuery插件:基于CSS3和HTML5的幻灯片展示_脚本技术_前端技术
您的位置： &
& 详细内容
文章简介：zSlide-基于CSS3/HTML5演示文档jQuery插件。
一、卖的什么葫芦药？
是我最近折腾的一个jQuery插件，借助于CSS3和HTML5的一些新特性，在浏览器中实现类似于powerpoint幻灯片展示。
二、为何需要？
无论是在公司内部，还是在一些技术会议上，我们做分享的时候，用的最多的想必是powerpoint。但是，powerpoint这个东西本身就是缺乏&自由&与&分享&精神的，因为其目前无法在线共享。要学习某技术会议上大牛分享的东西，多半要去找资源&download&整理或解压或打开之类，资源不好还要清理等等。
oh, my! 像我这样懒得抽筋的人，决不愿意专门去做这种&烧水洗脚&的事情的！此时，我总不禁慨叹，要是可以直接在浏览器中查看该多好啊&&饭来张口，衣来伸手。
其实呢，是有专门的网站做这样的事情的。例如国内的豆丁，风波的百度文库，国外知名的，但是，考虑到产品兼容性，这些站点的文档演示媒介都是flash，其实也没什么不好啦，就是巧克力里面的坚果外面还包了一层壳，有点让人不爽气！
显然，如果可以使用HTML+JS实现类似powerpoint演示文档的页面效果，即方便资源共享和技术的传播，同时，又具有简洁高效持久性。这就是zSlide诞生的意义所在。//zxx:以后一些分享我会附上zSlide幻灯片版本。
三、主要使用人群
zSlide插件下的演示文档页面的制作虽然简单，但是，还是需要一定的CSS与HTML技术基础的，因此，zSlide插件的主要使用人群就是web开发者了，尤其是web前端开发er们。
四、demo体验与示例下载
demo您可能狠狠地点击这里：
下载您可以狠狠地点击这里：
插件本身用到的资源有：,jquery.js (官方最新)一个以及一些HTML没有使用任何图片
五、关于浏览
浏览方式有两种：其一为快捷键，PageUp键和PageDown，分别指往前和往后；其二为按钮（见右下角工具栏），有回到起始页，前进，后退以及快速索引。如下图：
zSlide插件下如果你要跨界浏览时，页面会提示&前面没有&或是&已经播放结束&，如下截图：
您可能注意到了，zSlide插件含有鼠标隐藏功能，即鼠标如果在上demo页面主体区域保持不动超过3秒，鼠标就会隐藏，移动的时候又会出现。这是为了浏览的时候更好的体验，类似视频浏览~~
六、关于浏览器支持
因为使用了不少CSS3和HTML5的技术，以及ES5的些东西。因此，支持的浏览器为IE9+，最近版本的FireFox, Opera以及Chrome浏览器。综合来看，Chrome浏览器下的交互效果最好。
顺带一提，本插件不少idea和做法借鉴了jQuery Mobile.
七、关于界面
1.顶部顶部为进度条，最右边的数字是总页面，会变的那个数字指当前所在页数。
2. 主体主体就是主体了，没什么好说的。
3. 底部底部左侧为版权信息，请保留。右侧为工具栏，包含一些交互和自定义的功能。
提示：顶部进度条以及底部的工具条可以通过双击页面的空白区域进行隐藏与显示的切换显示。
八、关于底部工具条
底部工具栏上几个关于浏览的按钮上面已经展示了，不再赘述，现在着重讲讲其他两个重要的交互按钮。
1. 定时提醒功能右下角钟一样的图标代表的就是定时提醒功能。平时我们做文档演示应该都是有时间限制的，例如45分钟演讲，15分钟提问。可能我们讲得过于投入一下子忘了时间久不太好了，这时如果演示文档可以卖萌般地提下醒，那就很有意思地啦！
点击后会有类似下图的弹框：
其中总时间是必填的，小于720分钟，也就是12小时，该时间是一定会提醒的。结束前多少时间提醒可以输入多个以非数值分隔的时间值，插件会自动筛选其中合适的时间值（应小于总时间），点击确定按钮后进入定时提醒。
定时提醒功能使用了HTML5 localStorage存储就是，也就是当你不小于关闭了该页面，再次打开该页面的时候，如果检测到您本地有未过期的提醒时间，会提醒你是否使用该时间，如下截图：
zSlide插件走的是卖萌路线，其所有的提示都是&主人，~&开头，那时间提醒举例，根据距离的时间不同，其卖萌的提示也会有所差异，其中就是一个：
2. 自定义背景功能zSlide插件下的默认背景是我配色的深色基色#34538b加上一个径向高亮渐变。您可以根据自己的喜好对其进行修改。
点击如下所示图标按钮：
在打开的弹框中您可以设置自己喜欢的背景色（建议使用深色背景，例如#123456），或是自己喜欢的在线图片地址，或者直接从本地选择您喜欢的一张图片（）。
所有背景的修改都是即时预览的，且100%自适应于浏览器窗体，当您点击取消按钮关闭的时候背景会从预览状态还原。现在我们从本地随便选取一张图片（需小于500K），然后页面背景就会：
如果点击确定按钮的时候&记住我的选择&处于勾选状态，则下次打开这个页面的时候就会使用该背景图，否则，浏览器一旦关闭，背景还是旧的。
3. 使用帮助这就是个链接了，就是最右边的那个图标按钮，就是指向本文的。该功能不可自定义。
关于工具按钮自定义实际上，右下角的工具栏选项是可以自定义的。完整的工具栏选项如下：
$.zSlide.arrayTool = [&Home&, &Time&, &Background&, &Prev&, &Index&, &Next&];
再初始化的之前，您可以通过改变该数组选项决定哪些工具栏项显示，例如，我们现在把&回到初始页&这个选项去掉，则如下代码：
$(function() {
$.zSlide.arrayTool = [&Time&, &Background&, &Prev&, &Index&, &Next&];
$.zSlide.init();
九、关于代码部分的使用
CSS部分如下：
&link rel=&stylesheet& href=&css/jquery.zSlide-min.css& type=&text/css& /&
&ink rel=&stylesheet& href=&css/yourSlide.css& type=&text/css& /&
因为幻灯片内容千差万别，因此，一般来讲，每个幻灯片都对应一个特别的内容相关的CSS文件，对应上面的yourSlide.css。例如demo页面中的demo.css，对动态载入的图片进行了一些特殊的样式设置。
提示：jquery.zSlide.css只对body标签reset了一个margin属性和微软雅黑字体，然后a标签的颜色和点击样式，pre标签的样式，其他所有的标签都没有reset。
JS部分如下：
&script src=&js/jquery-min.js&&&/script&
&script src=&js/jquery.zSlide-min.js&&&/script&
&script src=&js/yourSlide.js&&&/script&
$(function() {
/* 可以在初始化之前更改一些信息 */
$.zSlide.init();
与CSS类似，幻灯片中可能会有一些特殊的交互。例如demo页面中为提高性能，对图片所做的的动态延时加载。
提示：zSlide插件采用的是字面量的书写风格，其中所有的参数，方法都是可以全局访问的，然而，除了上面提到的arrayTool参数，其他属性或方法不建议也没有必要去修改。另外zSlide插件中还内置了一个针对这类无滚动页面的弹出框插件zDialog，这个后面会进一步介绍。
HTML部分HTML部分的头部和尾部是固定不变的，请勿有任何修改。如下：
&div id=&header& class=&zsl_header& data-role=&header&&&/div&
&&div id=&footer& class=&zsl_footer& data-role=&footer&&
&!-- 请保留版权信息 --&
& &a href=&/&&zhangxinxu&/a&
主体部分是有着特定格式的列表。正如前面提到的，本插件借助了一些jQuery Mobile的做法，例如并没有采用HTML5的新标签，标签类似使用自定义属性data-标示，且这个标示关系到交互行为，是必不可少的。
拿demo页面中第一个很简单的slide页面举例，如下HTML代码：
&div id=&slide1& class=&zsl_slide slide& data-role=&slide&&
&h1 class=&zsl_title&&Fade列表测试&/h1&
&div class=&zsl_section&&
&p class=&zsl_fade fade& data-role=&fade&&这是data-role为fade的第1行元素&/p&
&p class=&zsl_fade fade& data-role=&fade&&这是data-role为fade的第2行元素&/p&
首先，每个slide页面需要包含在一个data-role=&slide&的div标签中，其中类名zsl_slide用做间距美化，slide为webkit核心浏览器下页面切换动画效果所必须，id是必须且唯一的（可以没有规律，当然有序的id便于识别）。
如果slide页面中有需要逐步呈现的元素，需要给这些元素设置data-role=&fade&，同时应用这两个类名zsl_fade和fade。一般来讲，zsl_title和zsl_section的结构使固定不变的。
在使用的时候，我们需要改动的就是&div class=&zsl_section&&之间的主体内容。且建议使用语义化的标签（div标签避免使用）。
特定的HTML，然后，其他所有的交互都交给zSlide完成，从使用上来讲不可不谓简单。只是，在制作演示文档的时候要花点功夫，因为无法像powerpoint一样可以拖动等可视化操作，但是，对于我们这类经常与浏览器打交道的前端开发者而言，这些都是小菜了，因此，zSlide可以说是专门针对前端开发人员使用的演示文档jQuery插件！
事件add on
内容太多，这个给忘了，补上。
您可以在data-role=&slide&的元素上绑定一个slideload事件，当这个slide页面载入的时候就会执行该方法。例如demo页面中的图片的动态载入，其相关代码就是：
$(&#slide3&).bind(&slideload&, function() {
var that = $(this);
//为了清楚看到延时加载的效果，这里设置了一个1秒的定时器
相信该事件API会很有用的。
页面间跳转add on
您可以在页面上使用a标签做自定义的slide页面间的跳转，例如：
&a href=&#slide3&&跳跳跳&/a&
点击这个&跳跳跳&链接后，整个演示文档就会指向id为slide3的slide页面，实现了无刷新跳转。如果这个id指向的元素不存在或是不是data-role=&slide&，则演示文档会跳转到第一页，这个是需要注意的。
十、内置zDialog插件介绍
zSlide插件中还内置了一个zDialog插件，用来显示一些提示文字或是工具栏的交互操作等。该插件可以全局访问，您可以随意使用，现在简单介绍下。
zDialog概述zDialog插件是个有针对性（专门针对这种无滚动页面设计的）的插件，其UI应用了很多CSS3属性，定位借助CSS完成（JS亦可调整，只在某些情况下），一次只能打开一个弹框，弹框关闭，里面所有的元素都会被remove，因此不能直接load当前页面上已经存在的元素，否则一次性玩完。
参数与zSlide不同，zDialog提供了不少参数API，如下表：
ajax页面地址，文字或HTML字符串
布尔型 是否是ajax加载。如果是true,则url参数就当作ajax请求地址处理
对象 ajax发送附带参数
布尔型 是否显示黑色浅透明遮罩层。默认是显示
布尔型 是否显示关闭按钮。默认为不显示
字符串 弹框的标题。有则显示，无则不显示
pageContainer
jQuery元素对象 加载弹框HTML的容器
函数 弹框显示时调用的方法
函数 弹框完全关闭时调用的方法
基本使用如下：
$.zDialog.open({
url: "ajax.php",
title: "测试",
closable: true,
onShow: function() {
alert("加载成功咯~~");
一些内置的API方法有：1. $.zDialog.alert(message, callback, options);例如上面这张图的效果就是如下一行代码搞定的：
$.zDialog.alert(&主人，时间到了，喵~~&);
callback参数为点击确定按钮时候执行的回调，options参数一般都是打酱油的。
2. $.zDialog.confirm(message, sureCall, cancelCall, options);确认提示框，例如下面这个效果即使使用的这个方法：
各个参数的含义一目了然，我就不铝恕options参数同样一般都是打酱油的。
3. $.zDialog.remind(message, options);直接提示框，没有关闭按钮，例如：
$.zDialog.remind(&页面跳转中...&);
4. $.zDialog.loading(options);&加载中&效果提示框，例如ajax load页面的时候，插件会自动调用该方法。
5. $.zDialog.position();弹框的JS重定位。该方法用在弹框内容宽度超过最小宽度很多或是高度超过最小高度很多的时候使用，例如zSlide插件中的自定义背景效果的弹框&&
$.zDialog.open({
url: "some HTML",
ajax: false
}).position();
6. $.zDialog.close();弹框关闭方法，调用该方法会触发onClose回调，且Chrome等浏览器下会有pop动画效果。
7. $.zDialog.remove();弹框移出方法，调用该方法不会触发onClose回调，也没有任何动画效果，元素直接从页面上bye bye.
十一、结语、唠叨及补充
首先关于命名，为何插件叫做zSlide呢，因为幻灯片的英文名就是slide，而且HTML5正好有个slide元素。但是，单单slide.js容器与其他命名冲突。需要加个名字头，开始自己使用的是zsl(可以看到我CSS的类都是以这个前缀开头的)，也就是zslSlide，但是，显然sl与Slide重复了，于是，一不做二不休，把sl给去掉了，于是就是zSlide了。至于为何要使用z很简单了，就像佐罗喜欢用剑在敌人胸上画&z&图案一样，因为它姓&佐&，姓氏拼音首字母为&z&，我的也是&z&。我记得以前我写的插件使用zxx作为名字头，但是，后来发现貌似不够低调，于是现在xx都去掉了。
有了zSlide自然也就有了zDialog~~
虽然自己写这个插件还是很用心的，各个细节都很尽力地雕琢，但是，水平有限，因此肯定还有N多大小问题，欢迎提出bug(尽量详细点)或是改进意见。
自己还没做过压力性测试，仅仅三个slide页面，所以，当slide页面很多，例如上百张时的性能问题自己还没谱，欢迎反馈，欢迎交流。
( 17:52:39)
( 17:52:12)
( 17:50:55)
( 17:18:28)
( 17:18:25)
( 17:18:01)
( 19:23:45)
( 19:21:43)
相关排行总榜2014级教育技术学专业举行PPT设计作品展
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&双击自动滚屏
发布者：吴永社 发布时间： 阅读：<font color="#FF次
&&& 日晚，我院 2014级教育技术学班在励志楼308教室举行“PPT设计作品展”，教育学院李昌茂副院长、教育技术教研室全体老师参加了本次作品展。&&& 此次活动共分成15个小组，作品选题丰富多样且贴近同学们的生活，例如，关于低头族、熬夜族、网购、环境保护、考研等等主题。各小组综合应用了所学过的专业课程知识和技能来设计、创作作品，以动画、图片、视频等丰富多彩的形式诠释自己的选题。教育技术专业老师们对每件作品进行了精彩的点评，给予了高度赞扬，提出了良好的意见建议。&&& 最后，由田斌老师和杨家宽老师对本次活动进行了总结，并对作品后期修改完善以及将来学习努力方向提出了宝贵建议，同学们受益匪浅，整个活动掌声不断，取得了圆满成功。
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&摄影:段芳
Copyright: 楚雄师范学院&教育学院 &地址： 云南省楚雄市鹿城南路461号【图文】快速发展的现代科技PPT_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
评价文档：
快速发展的现代科技PPT
上传于||暂无简介
大小：7.47MB
登录百度文库，专享文档复制特权，财富值每天免费拿！
你可能喜欢您所在位置： &
&nbsp&&nbsp&nbsp&&nbsp
移动通信技术的展及未来.ppt 128页
本文档一共被下载：
次 ,您可全文免费在线阅读后下载本文档。
&#xe600;下载提示
1.本站不保证该用户上传的文档完整性，不预览、不比对内容而直接下载产生的反悔问题本站不予受理。
2.该文档所得收入(下载+内容+预览三)归上传者、原创者。
3.登录后可充值，立即自动返金币，充值渠道很便利
需要金币：150 &&
你可能关注的文档：
··········
··········
OFDM的优点　抗衰落能力强OFDM把用户信息通过多个子载波传输，在每个子载波上的信号时间就相应地比同速率的单载波系统上的信号时间长很多倍，使OFDM对脉冲噪声和信道快衰落的抵抗力更强。同时，通过子载波的联合编码，达到了子信道间的频率分集的作用，也增强了对脉冲噪声和信道快衰落的抵抗力。因此，如果衰落不是特别严重，就没有必要再添加时域均衡器。　频率利用率高OFDM允许重叠的正交子载波作为子信道，而不是传统的利用保护频带分离子信道的方式，提高了频率利用效率。OFDM系统的基本原理　适合高速数据传输OFDM自适应调制机制使不同的子载波可以按照信道情况和噪音背景的不同使用不同的调制方式。当信道条件好的时候，采用效率高的调制方式。当信道条件差的时候，采用抗干扰能力强的调制方式。再有，OFDM加载算法的采用，使系统可以把更多的数据集中放在条件好的信道上以高速率进行传送。因此，OFDM技术非常适合高速数据传输。　抗码间干扰能力强ISI是数字通信系统中最主要的干扰之一，它与加性的噪声干扰不同，是一种乘性的干扰。造成码间干扰的原因有很多，实际上，只要传输信道的频带是有限的，就会造成一定的码间干扰。OFDM由于采用了循环前缀，对抗码间干扰的能力很强。OFDM系统的基本原理OFDM的不足之处　对频偏和相位噪声比较敏感OFDM技术区分各个子信道的方法是利用各个子载波之间严格的正交性。频偏和相位噪声会使各个子载波之间的正交特性恶化，仅仅1％的频偏就会使信噪比下降30dB。因此，OFDM系统对频偏和相位噪声比较敏感。　负载算法和自适应调制技术会增加系统复杂度负载算法和自适应调制技术的使用会增加发射机和接收机的复杂度，并且
正在加载中，请稍后...【智慧工厂系列】彭瑜主席：智慧工厂的支撑技术和发展路径（96页PPT）
【智慧工厂系列】彭瑜主席：智慧工厂的支撑技术和发展路径（96页PPT）
首先欢迎您的阅读，长期聚焦工业4.0与智能制造等，独家专访、深度观察、重磅推荐等。读过之后，您可以1、关注公号；2、转发本文；3、给我留言；连接，让彼此拥有更多。 【军导读】：随着工业4.0和智能制造理论探讨的深入，部分理论成果开始与实践结合，形成可供借鉴和应用的体系。军观察公号将在近期推出智慧工厂系列专题，主要为专题文章、访谈和演讲。 本文系PLCopen中国组织名誉主席彭瑜老师在2015年11月7日，中国自动化科技联盟在上海举办的“中国智慧工厂探索实践之数字制造”高峰论坛演讲PPT，首发于易能立方公号（encube） ___________________________________易能立方：工业自动化及装备制造领域的思想者、创新者和实践者，致力于新锐技术理念和先进商业思维的开发和传播。（完）【世界很大，欢迎勾搭~】
发表评论：
TA的推荐TA的最新馆藏}