flipsnap--手机屏幕水平滑动框架

　　　　在很多手机应用中，大家都会见过这样一种效果：当手指横向滑动屏幕时，屏幕上的页面会向左或向右滑动。

　　　　下面介绍一下当用HTML5+CSS3开发手机应用时解决这类效果的一款js框架：flipsnap。

　　　　flipsnap.js的源码大家可以到flipsnap官网：http://pxgrid.github.com/js-flipsnap/下载。

　　　　下面列出我写的小例子，大家一看应该就看明白了。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>水平切换 demo</title>
<meta name="Keywords" content="">
<meta name="author" content="@my_programmer">
<style type="text/css">
/*重置{*/
body,div,span{ padding:0;margin:0;}
/*}重置*/
.all{width:602px;height:302px;margin:100px auto 0;border:2px red solid;overflow:hidden;}
.inner{width:4816px;height:302px;}
.inner>div{width:600px;height:300px;border:1px blue solid;float:left;font-size:80px;font-weight:bold;text-align:center;line-height:300px;}
.pointer{width:256px;margin:20px auto;overflow:hidden;}
.pointer>span{float:left;width:20px;height:20px;border-radius:50%; margin:0 5px;border:1px #000 solid;}
.color{background:#ff0;}
</style>
</head>
<body>
    <div class="all">
        <div class="inner">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
        </div>
    </div>
    <div class="pointer" id="pointer">
        <span class="color"></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div style="margin:0px auto;width:80px;" class="go">
        <input type="button" value="go" style="width:50px;height:30px;"/>
    </div>
    <script src="jquery.js"></script>    <!-- 下面为了省事，例子4、6、7 使用了jquery-->
    <script src="flipsnap.js"></script>
    <script type="text/javascript">

    /*1.简单水平拖动*/
        Flipsnap('.inner');    //移动次数为子元素个数减一    

    /*2.设定每次移动的距离*/
        //Flipsnap('.inner',{
            //distance:602    //每次移动的距离，移动次数为子元素个数减一；注意：此处不能有分号,可以有逗号
        //});
    
    /*3.设定每次移动的距离,和，最多移动的次数*/
        //Flipsnap('.inner',{
            //distance:602,
            //maxPoint:7        //最多移动的次数
        //});

    /*4.绑定事件*/
        /*var $pointer=$('.pointer span');
        var flipsnap=Flipsnap('.inner',{distance:602});
        flipsnap.element.addEventListener('fsmoveend',function(){
            $pointer.filter('.color').removeClass('color');            //filter 为jquery的筛选器，筛选出与指定表达式匹配的元素集合
            $pointer.eq(flipsnap.currentPoint).addClass('color');
        },false);*/

    /*5.refresh 刷新*/
        //var flipsnap=Flipsnap('.inner');
            //flipsnap.refresh();        //刷新当前页面，当屏幕切换时，此代码就派上用场了
    /*6.移动到指定位置,鼠标不可拖动 */
        /*var flipsnap = Flipsnap('.inner', {
            distance: 602,
            disableTouch: true     //true 鼠标不可拖动;  false 鼠标可拖动
        });
        $('.go').click(function() {
            //flipsnap.moveToPoint(3);    //移动到指定位置,第n+1个
            flipsnap.toNext();    //移动到下一元素
            //flipsnap.toPrev();    //移动到上一元素
        });*/

    /*7.next, prev*/
        /*var flipsnap = Flipsnap('.inner', {
            distance: 602,
            disableTouch: true     //true 鼠标不可拖动;  false 鼠标可拖动
        });
        $('.go').click(function() {
            flipsnap.toNext();    //移动到下一元素
            //flipsnap.toPrev();    //移动到上一元素
        });*/

    </script>
</body>
</html>

posted on 2012-10-31 19:15  挨踢前端  阅读(8731)  评论(0)  编辑  收藏  举报

导航