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>
复制代码
【作者】: 段华建 【出处】: http://www.cnblogs.com/duanhuajian/archive/2012/10/31/2748585.html 【声明】:所有博文标题后加(share)的表示收集的他人优秀文章,其余的则为原创。欢迎转载,但请在显要位置显示本文链接,并保留本段声明,否则追究法律责任,谢谢!。

你可能感兴趣的:(框架)