酷炫的动态切换

image image

Reference API

html

根元素应该包括在一个ID里面

 <div id="impress"></div>

子元素的div ID值为路由#ID

2D 属性API

默认生成，无限画布，data-x,data-y是相对与画布中心位置的偏移

 <div id="bored"  data-x="-1000" data-y="-1500">

data-rel-x,data-rel-y是相对于上一个位置的偏移

 data-rel-x="500" data-rel-y="1000"

其他的data-scale="4"，data-rotate = "90" 表示切换时的动画

JavaScript

impress( [ id ] )也可以这样来定义根元素

var impressAPI = impress("root");

初始化 impressAPI .init();

卸载实例.tear()；

这可以用来“卸载”impress.js。对此的一个特殊用例是，如果要对演示文稿进行动态更改，可以进行拆卸，应用更改，然后init() 再次调用。

js动态跳转next();prev();

impress:stepenter；impress:stepleave自定义的事件

rootElement.addEventListener( "impress:stepenter", function(event) {
   var currentStep = event.target;
 /**/
 });

默认事件是键盘的up,down。可自行添加其他的

 document.addEventListener('mousewheel',mousewheel, false); 
 var status = true;  
 /*  impress:stepenter  在回调里将status置为true*/
 function mousewheel(event){
     if(status){
         status = false;
         if(event.wheelDelta>0){
           api.prev();     
         }else{
             api.next();
         }
     } 
 }

好了，可以使用滚轮了