必优博客

简单的描述一下所谓的页面滑动切换，就是当点击页面某个链接，页面左边或右边滑动切换一个子页面，当点击网页任何地方时，将滑动出来的页面再隐藏，这里biuuu只是对这个PageSlide插件做一个简单说明，具体可以实现什么功能呢？可以做一个框架式的左或右菜单，这个应用很多，具体的效果图如下：

点我查看PageSlide在线实例[在线演示]

使用说明
需要使用jQuery库文件和PageSlide库文件
必优推荐级别：★★★
使用实例
一，包含文件部分

1. <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
2. <script type="text/javascript" src="jquery.pageslide.js"></script>

二，HTML部分

1. <ul>
2. <li><a href="_left.html" id="slide-left">左侧页面</a></li>
3. <li><a href="_right.html" id="slide-right">右侧页面</a></li>
4. <li><a href="_modal.html" id="slide-modal">模态页面</a></li>
5. </ul>

三，Javascript部分

1. <script type="text/javascript">
2. $("#slide-left").pageSlide({ width: "350px", direction: "left" });
3. $("#slide-right").pageSlide({ width: "350px", direction: "right" });
4. $("#slide-modal").pageSlide({ width: "350px", direction: "left", modal: true });
5. </script>

如上实例，使用PageSlide插件类似于框架，指定链接的URL，如上左侧页面链接指向_left.html页面，而在调用pageSlide()接口时只需要指定页面的宽度和页面出现的方位，两个参数如下：
width表示页面宽度
direction表示页面出现的方位

使用jQuery插件PageSlide实现页面滑动切换比效简单，具体应用可制作菜单或新页面切换等。