首先看个列子：http://www.webhek.com/misc/impress-js昨天，我写了一些关于Impress.js的东西，对于创建在线的自我展示，这是一个非常不错的JavaScript库。由于是线上发布，所有有部分人问我怎么正确的使用它。因为没有在实际的项目页面设置帮助文档。这一篇文章将帮助你开始创建一个简单的幻灯片，但是之后你一定要完成它，可以用它来做很多酷炫的效果，唯一限制你的就是你的创造力。需求为了看到效果，请使用GoogleChromeorSafari(orFirefox10orIE10).Impress.js目前并不兼容早期的FirefoxorInternetExplorer版本。创建首先，要创建一个Web页面。我创建的页面如下：<!doctypehtml><html><head><title>ImpressTutorial</title><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"></head><body></body></html>在</body>之前添加impress.js文件，将Impress.js导入到你的项目中<scripttype="text/javascript"src="impress.js"></script>接下来创建一个id是impress的div容器包裹这个幻灯片，<divid=“impress”></div>创建幻灯片在个人展示中，你将看到创建一个幻灯片是如此的简单。每个幻灯片是一个class为step的div元素（被包裹在id是impress的容器内）(ps:<div>的id可有可无，当有id时url中的hash变化是随着id走；反之就是step-[num]，如)<divclass="step">Myfirstslide</div>创建幻灯片的同时，要添加一些数据属性。下面是一些可用的数据属性：data-x=幻灯片的x坐标data-y=幻灯片的y坐标data-z=幻灯片的z坐标data-scale=通过指定一个值来进行缩放，data-scale为5则将会在你幻灯片原始尺寸基础放大5倍data-rotate=通过一个数字度数来确定旋转你的幻灯片data-rotate-x=为3D用，这个数字度数是它应该相对x轴旋转多少度。（前倾/后仰）data-rotate-y=为3D用，这个数字度数是它应该相对y轴旋转多少度。（左摆/右摆）data-rotate-z=为3D用，这个数字度数是它应该相对z轴旋转多少度。让数据属性起作用接下来的幻灯片设置将引导你理解每一个数据属性从一个初始的幻灯片开始，这个幻灯片已将它data-x和data-y数据属性设置为0，所以会出现在页面的中间。<divclass="step"data-x="0"data-y="0">Thisismyfirstslide（显示的内容）</div>第二个幻灯片的data-x值为500、data-y值为0，活动的时候它将会向左平移(滑动)500px的地方。<divclass="step"data-x="500"data-y="-400">Thisisslide2</div>第三张幻灯片其data-x值不变，data-y位置为-400，这将会是从顶部400px处滑入屏幕。<divclass="step"data-x="500"data-y="-400">Thisisslide3</div>第四张幻灯片来个新花样，使用data-scale的值控制其缩放大小。data-scale=”0.5″表示着它应该是一半的尺寸，当它变成活动的演示时将通过必需的倍数调节所有幻灯片的缩放尺寸，从这一步绚丽开始起步<divclass="step"data-x="500"data-y="-800"data-scale="0.5">Thisisslide4</div>第五张幻灯片旋转属性允许你旋转一个幻灯片到当前视图，幻灯片5被设置旋转90度，视觉效果微叼哈<divclass="step"data-x="0"data-y="-800"data-rotate="90">Thisisslide5</div>第六张幻灯片开始3Dstyle，可为每个维度的轴指定旋转属性(x,y,z)。x轴是横轴，意思是你可使事物倾斜(正值)或向后(负值)，y轴是竖轴，所以你可使事物向左摇摆(负值)或向右(正值)，z轴是纵轴，这将是旋转的东西向上（负值）和向下（正值）。<divclass=“step”data-x=“-2600″data-y=“-800″data-rotate-x=“30”data-rotate-y=“-60″data-rotate-z=“90”data-scale=“4”>Thisisslide7andithasa3DtransitionANDascale.</div>对于不支持Impress.js的浏览器做降级处理在<divid=”impress”>之前添加如下一个div<divclass="no-support-message">Yourbrowserdoesn'tsupportimpress.js.TryChromeorSafari.</div>然后将下列样式添加到你的样式表中：.no-support-message{display:none;}.impress-not-supported.no-support-message{display:block;}impreess源码已经发布在GitHub上，地址：https://github.com/bartaz/impress.js官方demo地址：http://bartaz.github.com/impress.js
JS文件下载:1.CSDN下载地址:http://download.csdn.net/detail/freshflower/51673982.百度文库下载地址:http://wenku.baidu.com/view/e02c670dbb68a98271fefadd版本说明:相比上一版本优化功能如下:1.界面更加美化,可以显示上个月月末的几天及下个月的前几天;2.优化日期选择时对起始年月的设定,方便选择年月;3.优化年与月的选择,让界面更为美观.4.支持浏览器的中英文语言的设定.显示中英文界面申明:Iteye网站与百度空间为作者的发布地方,其他任何地方的与此一样的文档均为盗用,文档的错误引起的误解与不便,请大家小心,务必到这两个站点下载,文档有不足的地方,会继续更新,谢谢大家的支持!!程序截图:函数说明:主调函数JTC.setday(args)参数说明args:1.可以为空;2.可以为字符串.输出控件的ID3.结构体,结构体中含有参数如下:{outObject:字符串或控件,输出控件的ID值或对象.readOnly:布尔型设置输出控件是否为只读模式,false:非只读(默认);true:只读(主要解决.net服务控件不能随意readOnly的问题)showClear:布尔型是否显示清空按钮true(默认):显示;false不显示.format:字符串返回日期的格式(默认:yyyy-MM-dd).today:字符串/日期对象设置当前的日期(影响范围:所有)minDate:字符串/日期对象设置可选日期的下限maxDate:字符串/日期对象设置可选日期的上限ranged:布尔型设置是否包含可选日期范围的边界值false:不包含;true:包含(默认)startDay:字符串/日期对象设置每次选择时的起始年月}JTC.setToday(dateObj)说明:设置今天的日期.默认取客户端的时间;客户端的时间并不一定会与服务器的时间一致.所以设置此值的意义就是在于:无论客户端的时间怎么改,控件的日期与服务器依然可以保持同步.参数:dateObj字符型或日期对象字符型最佳格式是:yyyy/MM/dd示例:'2012/07/25'JTC.setDateRange(minDate,maxDate,ranged)说明:设置日期可选范围(影响范围:所有)参数:minDate:字符串/日期对象设置可选日期的下限示例:'2010-02-11'maxDate:字符串/日期对象设置可选日期的上限示例:'2012-07-11'ranged:布尔型设置是否包含可选日期范围的边界值false:不包含;true:包含(默认)JTC.setDateFormat(format)说明:设置返回日期的格式(影响范围:所有)参数:format:字符型返回日期的格式示例:'yyyy/MM/dd';'yyyy年MM月dd日'JTC.setStartDay(date)说明:设置日期选择时的起始年月(影响范围:所有)参数:date:字符串/日期对象示例:'2012-07-25'调用举例:1.最简单的调用Html代码<!--文本框--><inputtype="text"onclick="JTC.setday()"/><!--使用DIV--><divstyle="width:120px;height:30px;border:1pxsolidblue;"onclick="JTC.setday()"></div><!--使用文本框与按钮相结合--><inputtype="text"id="timeID"/><inputtype="button"value="选择1"onclick="JTC.setday('timeID')"/><inputtype="button"value="选择2"onclick="JTC.setday({outObject:'timeID'})"/>2.设定可选日期范围Html代码<!--设置可选范围为:2012-07-08至2012-08-23并且包含边界值--><inputtype="text"onclick="JTC.setday({minDate:'2012-07-08',maxDate:'2012-08-23',ranged:true})"/><!--设置可选范围为:大于2012-07-25的日期不包含边界值--><inputtype="text"onclick="JTC.setday({minDate:'2012-07-25',ranged:false})"/>3.其他细节设置Html代码<!--设置返回日期格式,文本为只读模式--><inputtype="text"onclick="JTC.setday({format:'yyyy年MM月dd日',readOnly:true})"/><!--设置选择日期的起始年月为1990年1月,即每次选择时都是显示该年月--><inputtype="text"onclick="JTC.setday({startDay:'1990-01-01'})"/><!--设置不显示清空按钮--><inputtype="text"onclick="JTC.setday({showClear:false})"/>4.全局设置(设置后会影响到整个页面)Html代码<html><head><scriptlanguage="javascript"src="JTimer.js"></script><script>JTC.setToday('2012/06/28');//设置今天的日期为:2012-06-28JTC.setDateFormat('MM/dd/yyyy');//设置返回格式JTC.setDateRange('1960-01-01','2012-01-01',true);//设置可选日期范围</script></head><body>以下各个函数的调用所起的作用不同之处<br/>日期1:<inputtype="text"onclick="JTC.setday()"/><br/>日期2:<inputtype="text"onclick="JTC.setday({format:'yyyy年MM月dd日'})"/><br/>日期3:<inputtype="text"onclick="JTC.setday({startDay:'1980-01-01',showClear:false})"/><br/></body></html>差不多就这样了,若有什么不明白的地方,欢迎留言提问.一起进步!原文地址:http://freshflower.iteye.com/blog/1606222