页面左右滑动

jQuery-wPageSlide 页面左右滑动(手机桌面效果)

版本:1.0.45
更新:2011.04.05
下载:wpageslide.v1.0.45.zip
说明:试试拖动这整个页面(除了灰色的框框),或者点击右上角的超链接,这种效果很酷吧~

默认配置,满屏显示

$(document).ready(function(){
	$("div#wpageslide").wPageSlide();
}); 

在线演示

自定义配置,设置宽度和高度

$(document).ready(function(){
	$("div#wpageslide").wPageSlide({width: 600,height:400});
}); 

在线演示

options:

width: $(window).width() + 17, //宽度:默认使用满屏
height: $(window).height(), //高度:默认使用宽屏
btnsHide: false, //按钮隐藏:默认否
btnsPos: "b" //按钮定位:10个方位,参考btnPos函数,默认中下

btnsPos:

"t"  中上
"lt" 左上
"l""lb" 左下
"b"  中下
"c"  中间
"rt" 右上
"r""rb" 右下
"b"  中下

如何使用

<html>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery-wpageslide.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("div#wpageslide").wPageSlide();
});
</script>
<body>
    <div id="wpageslide" class="wpageslide">
        <div id="wpages" class="wpages">
            <div class="wpage">
            <p><p><strong>拖动灰色的框框试试,这种效果很酷吧!或者点击下面的链接,赶快体验一下。</strong> </p> </p>
            <p>我是内容1</p>
            <p>我是内容1</p>
            <p>我是内容1</p>
            <p>我是内容1</p>
            <p>我是内容1</p>
            <p>我是内容1</p>
            <p>我是内容1</p>
            <p>&nbsp;</p>
        </div>
        <div class="wpage"><p>我是内容2</p></div>
        <div class="wpage"><p>我是内容3</p></div>
        <div class="wpage"><p>我是内容4</p></div>
    </div>
    <ul id="wpagebtns" class="wpagebtns">
        <li>第1页</li>
        <li>第2页</li>
        <li>第3页</li>
        <li>第4页</li>
    </ul>
</div>
</html>
</body>