网页从右至左滑出效果

本质上是一个独立层&＃xff08;DIV或SECTION等&＃xff09;&＃xff0c;初始向右对齐&＃xff0c;宽度为0&＃xff0c;完全打开时变为100%。因此需要定义两个css类。

&＃xff08;初始&＃xff09;关闭状态&＃xff1a;

.i-page-slide {position: absolute;top: 0;right: 0;z-index: 2;width: 0;height: 100%;background-color: #f5f5f5;overflow-x: hidden;overflow-y: auto;-webkit-transition: -webkit-transform .3s;transition: -webkit-transform .3s;transition: transform .3s;transition: transform .3s,-webkit-transform .3s;-webkit-transform: translateX(100%);transform: translateX(100%);
}


开启状态&＃xff1a;

.i-page-open {width: 100%;-webkit-transform: translate(0);transform: translate(0);
}


因此打开浮动页面的方法是&＃xff1a;dom.addClass(&＃39;i-page-open&＃39;)

关闭的方法则是&＃xff1a;dom.removeClass(&＃39;i-page-open&＃39;)

一些细节&＃xff1a;

• 打开浮动页面时&＃xff0c;最好隐藏后面的非浮动内容区
• 打开浮动页面时&＃xff0c;最好给body设置属性overflow: hidden&＃xff0c;待全部关闭时&＃xff0c;再撤销
• 在宽屏&＃xff08;如平板&＃xff09;上&＃xff0c;如果想做居中效果&＃xff0c;可以利用media query&＃xff1a;

/*窗口过宽时整体居中显示*/
[[&＃64;media](http://my.oschina.net/u/1447355)](http://my.oschina.net/u/1447355) (min-width: 481px) {.i-page-slide {left: 50%;margin-left: -240px;}
}