webSlide - PPT演示文档javascript框架

fmms 9年前
     <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>