webSlide - PPT演示文档javascript框架
fmms 13年前
<p style="padding-bottom:0px;line-height:22px;border-right-width:0px;padding-left:0px;padding-right:0px;font-family:Helvetica, arial, freesans, clean, sans-serif;border-top-width:0px;border-bottom-width:0px;color:#333333;font-size:14px;border-left-width:0px;padding-top:0px;"><a style="padding-bottom:0px;border-right-width:0px;margin:0px;padding-left:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;color:#4183c4;font-size:14px;border-left-width:0px;text-decoration:none;padding-top:0px;" href="/misc/goto?guid=4958331266215664955">webSlide</a>是用于在线PPT演示文档的javascript框架</p> <h2 style="border-bottom:#cccccc 1px solid;padding-bottom:0px;border-right-width:0px;margin:20px 0px 10px;padding-left:0px;padding-right:0px;font-family:Helvetica, arial, freesans, clean, sans-serif;border-top-width:0px;font-size:24px;border-left-width:0px;padding-top:0px;">鸣谢</h2> <p style="padding-bottom:0px;line-height:22px;border-right-width:0px;padding-left:0px;padding-right:0px;font-family:Helvetica, arial, freesans, clean, sans-serif;border-top-width:0px;border-bottom-width:0px;color:#333333;font-size:14px;border-left-width:0px;padding-top:0px;">webSlide的想法来自于impress.js，但是本人在使用过程中发现impress.js经常卡，尤其是当演示文档页面和图片比较多之时，经常出现动画效果不流畅。</p> <p style="padding-bottom:0px;line-height:22px;border-right-width:0px;margin-top:15px;padding-left:0px;padding-right:0px;font-family:Helvetica, arial, freesans, clean, sans-serif;border-top-width:0px;border-bottom-width:0px;color:#333333;font-size:14px;border-left-width:0px;padding-top:0px;">写webSlide代码过程中，研究过<a style="padding-bottom:0px;border-right-width:0px;margin:0px;padding-left:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;color:#4183c4;font-size:14px;border-left-width:0px;text-decoration:none;padding-top:0px;" href="/misc/goto?guid=4958331267017041239">impress.js</a>和<a style="padding-bottom:0px;border-right-width:0px;margin:0px;padding-left:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;color:#4183c4;font-size:14px;border-left-width:0px;text-decoration:none;padding-top:0px;" href="/misc/goto?guid=4958331267816467187">reveal.js</a>，向两位作者表示感谢。</p> <h2 style="border-bottom:#cccccc 1px solid;padding-bottom:0px;border-right-width:0px;margin:20px 0px 10px;padding-left:0px;padding-right:0px;font-family:Helvetica, arial, freesans, clean, sans-serif;border-top-width:0px;font-size:24px;border-left-width:0px;padding-top:0px;">演示页面</h2> <p style="padding-bottom:0px;line-height:22px;border-right-width:0px;padding-left:0px;padding-right:0px;font-family:Helvetica, arial, freesans, clean, sans-serif;border-top-width:0px;border-bottom-width:0px;color:#333333;font-size:14px;border-left-width:0px;padding-top:0px;">演示页面地址<a style="padding-bottom:0px;border-right-width:0px;margin:0px;padding-left:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;color:#4183c4;font-size:14px;border-left-width:0px;text-decoration:none;padding-top:0px;" href="/misc/goto?guid=4958331268606669849">http://ksky521.github.com/webSlide/</a>，由于页面比较多，所以需要一定的加载时间。</p> <p style="padding-bottom:0px;line-height:22px;border-right-width:0px;margin-top:15px;padding-left:0px;padding-right:0px;font-family:Helvetica, arial, freesans, clean, sans-serif;border-top-width:0px;border-bottom-width:0px;color:#333333;font-size:14px;border-left-width:0px;padding-top:0px;">国内可以访问SAE上的演示页面：<a style="padding-bottom:0px;border-right-width:0px;margin:0px;padding-left:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;color:#4183c4;font-size:14px;border-left-width:0px;text-decoration:none;padding-top:0px;" href="/misc/goto?guid=4958331269398044411">http://qdemo.sinaapp.com/ppt/udc.htm</a>。</p> <p style="padding-bottom:0px;line-height:22px;border-right-width:0px;margin-top:15px;padding-left:0px;padding-right:0px;font-family:Helvetica, arial, freesans, clean, sans-serif;border-top-width:0px;border-bottom-width:0px;color:#333333;font-size:14px;border-left-width:0px;padding-top:0px;">演示页面内容为给公司UDC部门同事进行javascript入门培训的内容~</p> <h2 style="border-bottom:#cccccc 1px solid;padding-bottom:0px;border-right-width:0px;margin:20px 0px 10px;padding-left:0px;padding-right:0px;font-family:Helvetica, arial, freesans, clean, sans-serif;border-top-width:0px;font-size:24px;border-left-width:0px;padding-top:0px;">说明</h2> <p style="padding-bottom:0px;line-height:22px;border-right-width:0px;padding-left:0px;padding-right:0px;font-family:Helvetica, arial, freesans, clean, sans-serif;border-top-width:0px;border-bottom-width:0px;color:#333333;font-size:14px;border-left-width:0px;padding-top:0px;">因为是PPT演示文档，所以需要投影仪分辨率，所以演示页面的最佳分辨率为全屏模式下的 <code style="border-bottom:#eaeaea 1px solid;border-left:#eaeaea 1px solid;padding-bottom:0px;background-color:#f8f8f8;margin:0px 2px;padding-left:5px;padding-right:5px;font:12px 'Bitstream Vera Sans Mono', Courier, monospace;white-space:nowrap;border-top:#eaeaea 1px solid;border-right:#eaeaea 1px solid;padding-top:0px;border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-left-radius:3px 3px;border-bottom-right-radius:3px 3px;">1024*768</code> ，如果在自己电脑上查看，可以通过 <code style="border-bottom:#eaeaea 1px solid;border-left:#eaeaea 1px solid;padding-bottom:0px;background-color:#f8f8f8;margin:0px 2px;padding-left:5px;padding-right:5px;font:12px 'Bitstream Vera Sans Mono', Courier, monospace;white-space:nowrap;border-top:#eaeaea 1px solid;border-right:#eaeaea 1px solid;padding-top:0px;border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-left-radius:3px 3px;border-bottom-right-radius:3px 3px;">ctrl + -</code> 和 <code style="border-bottom:#eaeaea 1px solid;border-left:#eaeaea 1px solid;padding-bottom:0px;background-color:#f8f8f8;margin:0px 2px;padding-left:5px;padding-right:5px;font:12px 'Bitstream Vera Sans Mono', Courier, monospace;white-space:nowrap;border-top:#eaeaea 1px solid;border-right:#eaeaea 1px solid;padding-top:0px;border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-left-radius:3px 3px;border-bottom-right-radius:3px 3px;">ctrl + +</code> 缩放到合适的比例查看效果。</p> <p style="padding-bottom:0px;line-height:22px;border-right-width:0px;margin-top:15px;padding-left:0px;padding-right:0px;font-family:Helvetica, arial, freesans, clean, sans-serif;border-top-width:0px;border-bottom-width:0px;color:#333333;font-size:14px;border-left-width:0px;padding-top:0px;">建议浏览器chrome 16+，全屏模式（F11），以达到最佳动画效果。在Firefox下会出现拖尾现象，个人认为是Firefox 8下对CSS3动画效果渲染太慢导致，其他浏览器未测试。</p> <h2 style="border-bottom:#cccccc 1px solid;padding-bottom:0px;border-right-width:0px;margin:20px 0px 10px;padding-left:0px;padding-right:0px;font-family:Helvetica, arial, freesans, clean, sans-serif;border-top-width:0px;font-size:24px;border-left-width:0px;padding-top:0px;">使用示例</h2> <pre style="border-bottom-color:#cccccc;padding-bottom:6px;overflow-x:auto;overflow-y:auto;margin-top:15px;border-top-color:#cccccc;padding-left:10px;padding-right:10px;font:12px 'Bitstream Vera Sans Mono', Courier, monospace;margin-bottom:15px;color:#333333;border-right-color:#cccccc;border-left-color:#cccccc;border-left-width:1px;padding-top:6px;border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-left-radius:3px 3px;border-bottom-right-radius:3px 3px;"><code style="padding-bottom:0px;background-color:transparent;margin:0px;padding-left:0px;padding-right:0px;font:12px 'Bitstream Vera Sans Mono', Courier, monospace;padding-top:0px;border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-left-radius:3px 3px;border-bottom-right-radius:3px 3px;background-origin:initial;background-clip:initial;">wSlide({ slideId:'slide',//演示文档id canvasId:'myCanvas',//画板id ctrlId:'slideCtrl'//控制部分id });</code></pre> <h4 style="padding-bottom:0px;border-right-width:0px;margin:20px 0px 10px;padding-left:0px;padding-right:0px;font-family:Helvetica, arial, freesans, clean, sans-serif;border-top-width:0px;border-bottom-width:0px;color:#333333;font-size:16px;border-left-width:0px;padding-top:0px;">参数说明</h4> <blockquote style="padding-bottom:0px;line-height:22px;border-right-width:0px;padding-left:15px;padding-right:15px;font-family:Helvetica, arial, freesans, clean, sans-serif;border-top-width:0px;border-bottom-width:0px;color:#777777;margin-left:0px;font-size:14px;border-left-color:#dddddd;quotes:none;border-left-width:4px;margin-right:0px;padding-top:0px;"> <ul style="padding-bottom:0px;border-right-width:0px;margin:0px;padding-left:30px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;font-size:14px;border-left-width:0px;padding-top:0px;"> <li style="padding-bottom:0px;border-right-width:0px;margin:15px 0px;padding-left:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;font-size:14px;border-left-width:0px;padding-top:0px;">slideId: 演示文档内容部分ID，class为step为每页，slide为带边框的页面，<strong style="padding-bottom:0px;border-right-width:0px;margin:0px;padding-left:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;font-size:14px;border-left-width:0px;font-weight:bold;padding-top:0px;">必填</strong></li> <li style="padding-bottom:0px;border-right-width:0px;margin:15px 0px;padding-left:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;font-size:14px;border-left-width:0px;padding-top:0px;">canvasId: canvas元素画板部分ID，<strong style="padding-bottom:0px;border-right-width:0px;margin:0px;padding-left:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;font-size:14px;border-left-width:0px;font-weight:bold;padding-top:0px;">选填</strong></li> <li style="padding-bottom:0px;border-right-width:0px;margin:15px 0px;padding-left:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;font-size:14px;border-left-width:0px;padding-top:0px;">ctrlId: 控制部分ID，class为home代表返回首页，class为paint开启画板，class为clearIt清除画板，<strong style="padding-bottom:0px;border-right-width:0px;margin:0px;padding-left:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;font-size:14px;border-left-width:0px;font-weight:bold;padding-top:0px;">选填</strong></li> <li style="padding-bottom:0px;border-right-width:0px;margin:15px 0px;padding-left:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;font-size:14px;border-left-width:0px;padding-top:0px;">presentClass: 当前幻灯片class，<strong style="padding-bottom:0px;border-right-width:0px;margin:0px;padding-left:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;font-size:14px;border-left-width:0px;font-weight:bold;padding-top:0px;">选填，默认为present</strong></li> <li style="padding-bottom:0px;border-right-width:0px;margin:15px 0px;padding-left:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;font-size:14px;border-left-width:0px;padding-top:0px;">pastClass: 上一页幻灯片class，<strong style="padding-bottom:0px;border-right-width:0px;margin:0px;padding-left:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;font-size:14px;border-left-width:0px;font-weight:bold;padding-top:0px;">选填，默认为past</strong></li> <li style="padding-bottom:0px;border-right-width:0px;margin:15px 0px;padding-left:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;font-size:14px;border-left-width:0px;padding-top:0px;">futureClass: 下一页幻灯片class，<strong style="padding-bottom:0px;border-right-width:0px;margin:0px;padding-left:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;font-size:14px;border-left-width:0px;font-weight:bold;padding-top:0px;">选填，默认为future</strong></li> </ul> </blockquote> <h2 style="border-bottom:#cccccc 1px solid;padding-bottom:0px;border-right-width:0px;margin:20px 0px 10px;padding-left:0px;padding-right:0px;font-family:Helvetica, arial, freesans, clean, sans-serif;border-top-width:0px;font-size:24px;border-left-width:0px;padding-top:0px;">快捷键</h2> <ul style="padding-bottom:0px;line-height:22px;border-right-width:0px;margin:15px 0px;padding-left:30px;padding-right:0px;font-family:Helvetica, arial, freesans, clean, sans-serif;border-top-width:0px;border-bottom-width:0px;color:#333333;font-size:14px;border-left-width:0px;padding-top:0px;"> <li style="padding-bottom:0px;border-right-width:0px;margin:15px 0px;padding-left:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;font-size:14px;border-left-width:0px;padding-top:0px;">空格/→/↓/Tab/pageDown：下一页</li> <li style="padding-bottom:0px;border-right-width:0px;margin:15px 0px;padding-left:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;font-size:14px;border-left-width:0px;padding-top:0px;">←/↑/pageUp：上一页</li> <li style="padding-bottom:0px;border-right-width:0px;margin:15px 0px;padding-left:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;font-size:14px;border-left-width:0px;padding-top:0px;">P：开画板</li> <li style="padding-bottom:0px;border-right-width:0px;margin:15px 0px;padding-left:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;font-size:14px;border-left-width:0px;padding-top:0px;">C：清除画板</li> </ul> <h2 style="border-bottom:#cccccc 1px solid;padding-bottom:0px;border-right-width:0px;margin:20px 0px 10px;padding-left:0px;padding-right:0px;font-family:Helvetica, arial, freesans, clean, sans-serif;border-top-width:0px;font-size:24px;border-left-width:0px;padding-top:0px;">版本库地址</h2> <p style="padding-bottom:0px;line-height:22px;border-right-width:0px;padding-left:0px;padding-right:0px;font-family:Helvetica, arial, freesans, clean, sans-serif;border-top-width:0px;border-bottom-width:0px;color:#333333;font-size:14px;border-left-width:0px;padding-top:0px;">支持三种访问协议：</p> <ul style="padding-bottom:0px;line-height:22px;border-right-width:0px;margin:15px 0px;padding-left:30px;padding-right:0px;font-family:Helvetica, arial, freesans, clean, sans-serif;border-top-width:0px;border-bottom-width:0px;color:#333333;font-size:14px;border-left-width:0px;padding-top:0px;"> <li style="padding-bottom:0px;border-right-width:0px;margin:15px 0px;padding-left:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;font-size:14px;border-left-width:0px;padding-top:0px;">HTTP协议： <code style="border-bottom:#eaeaea 1px solid;border-left:#eaeaea 1px solid;padding-bottom:0px;background-color:#f8f8f8;margin:0px 2px;padding-left:5px;padding-right:5px;font:12px 'Bitstream Vera Sans Mono', Courier, monospace;white-space:nowrap;border-top:#eaeaea 1px solid;border-right:#eaeaea 1px solid;padding-top:0px;border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-left-radius:3px 3px;border-bottom-right-radius:3px 3px;">https://ksky521@github.com/ksky521/webSlide.git</code> 。</li> <li style="padding-bottom:0px;border-right-width:0px;margin:15px 0px;padding-left:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;font-size:14px;border-left-width:0px;padding-top:0px;">Git协议： <code style="border-bottom:#eaeaea 1px solid;border-left:#eaeaea 1px solid;padding-bottom:0px;background-color:#f8f8f8;margin:0px 2px;padding-left:5px;padding-right:5px;font:12px 'Bitstream Vera Sans Mono', Courier, monospace;white-space:nowrap;border-top:#eaeaea 1px solid;border-right:#eaeaea 1px solid;padding-top:0px;border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-left-radius:3px 3px;border-bottom-right-radius:3px 3px;">git://github.com/ksky521/webSlide.git</code> 。</li> <li style="padding-bottom:0px;border-right-width:0px;margin:15px 0px;padding-left:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;font-size:14px;border-left-width:0px;padding-top:0px;">SSH协议： <code style="border-bottom:#eaeaea 1px solid;border-left:#eaeaea 1px solid;padding-bottom:0px;background-color:#f8f8f8;margin:0px 2px;padding-left:5px;padding-right:5px;font:12px 'Bitstream Vera Sans Mono', Courier, monospace;white-space:nowrap;border-top:#eaeaea 1px solid;border-right:#eaeaea 1px solid;padding-top:0px;border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-left-radius:3px 3px;border-bottom-right-radius:3px 3px;">ssh://git@github.com:ksky521/webSlide.git</code> 。</li> </ul> <h2 style="border-bottom:#cccccc 1px solid;padding-bottom:0px;border-right-width:0px;margin:20px 0px 10px;padding-left:0px;padding-right:0px;font-family:Helvetica, arial, freesans, clean, sans-serif;border-top-width:0px;font-size:24px;border-left-width:0px;padding-top:0px;">克隆版本库</h2> <p style="padding-bottom:0px;line-height:22px;border-right-width:0px;padding-left:0px;padding-right:0px;font-family:Helvetica, arial, freesans, clean, sans-serif;border-top-width:0px;border-bottom-width:0px;color:#333333;font-size:14px;border-left-width:0px;padding-top:0px;">操作示例：</p> <pre style="border-bottom-color:#cccccc;padding-bottom:6px;overflow-x:auto;overflow-y:auto;margin-top:15px;border-top-color:#cccccc;padding-left:10px;padding-right:10px;font:12px 'Bitstream Vera Sans Mono', Courier, monospace;margin-bottom:15px;color:#333333;border-right-color:#cccccc;border-left-color:#cccccc;border-left-width:1px;padding-top:6px;border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-left-radius:3px 3px;border-bottom-right-radius:3px 3px;"><code style="padding-bottom:0px;background-color:transparent;margin:0px;padding-left:0px;padding-right:0px;font:12px 'Bitstream Vera Sans Mono', Courier, monospace;padding-top:0px;border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;border-bottom-left-radius:3px 3px;border-bottom-right-radius:3px 3px;background-origin:initial;background-clip:initial;">$ git clone git://github.com/ksky521/webSlide.git</code></pre> <h2 style="border-bottom:#cccccc 1px solid;padding-bottom:0px;border-right-width:0px;margin:20px 0px 10px;padding-left:0px;padding-right:0px;font-family:Helvetica, arial, freesans, clean, sans-serif;border-top-width:0px;font-size:24px;border-left-width:0px;padding-top:0px;">联系方式</h2> <p style="padding-bottom:0px;line-height:22px;border-right-width:0px;padding-left:0px;padding-right:0px;font-family:Helvetica, arial, freesans, clean, sans-serif;border-top-width:0px;border-bottom-width:0px;color:#333333;font-size:14px;border-left-width:0px;padding-top:0px;">作者博客：<a style="padding-bottom:0px;border-right-width:0px;margin:0px;padding-left:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;color:#4183c4;font-size:14px;border-left-width:0px;text-decoration:none;padding-top:0px;" href="/misc/goto?guid=4958331270207060763">js8.in</a></p> <p style="padding-bottom:0px;line-height:22px;border-right-width:0px;margin-top:15px;padding-left:0px;padding-right:0px;font-family:Helvetica, arial, freesans, clean, sans-serif;margin-bottom:0px !important;border-top-width:0px;border-bottom-width:0px;color:#333333;font-size:14px;border-left-width:0px;padding-top:0px;">作者新浪微博：<a style="padding-bottom:0px;border-right-width:0px;margin:0px;padding-left:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;color:#4183c4;font-size:14px;border-left-width:0px;text-decoration:none;padding-top:0px;" href="/misc/goto?guid=4958331271005138864">@三水清</a></p>