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

　　　　下面介绍一下当用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）的表示收集的他人优秀文章，其余的则为原创。欢迎转载，但请在显要位置显示本文链接，并保留本段声明，否则追究法律责任，谢谢！。

flipsnap--手机屏幕水平滑动框架的更多相关文章

  1. jquery 仿手机屏幕切换界面效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 项目实战：Qt手机模拟器拉伸旋转框架

    若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936原博主博客导航:https://blog.csdn.net/qq21497936/ar ...

  3. iSlider手机平台JS滑动组件

    iSlider手机平台JS滑动组件,无任何插件依赖.它能够处理任何元素,例如图片或者DOM元素.它有如下特性:能够自定义动画,自带的动画包括default, rotate, flip 和 depth你 ...

  4. JS事件监听手机屏幕触摸事件 Touch

    JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t ...

  5. Android 实现两屏幕互相滑动

    Android 实现两屏幕互相滑动 下文来自: http://blog.csdn.net/song_shi_chao/article/details/7081664 ----------------- ...

  6. CSS-页面超出手机屏幕

    手机页面左滑,页面超出手机屏幕. 解决方法: html,body{ overflow-x: hidden; } 从而解决问题,锁住横向滑动的屏幕.

  7. 根据判断PC浏览器类型和手机屏幕像素自动调用不同CSS的代码

    1.媒体查询方法在 css 里面这样写 -------------------- @media screen and (min-width: 320px) and (max-width: 480px) ...

  8. Pyqt adb 获取Android手机屏幕

    adb的全称为Android Debug Bridge,就是起到调试桥的作用.adb的工作方式比较特殊,采用监听Socket TCP 5554等端口的方式让IDE和Qemu通讯,默认情况下adb会da ...

  9. 相机拍的图，电脑上画的图，word里的文字，电脑屏幕，手机屏幕，相机屏幕显示大小一切的一切都搞明白了！

    相机拍的图,电脑上画的图,word里的文字,电脑屏幕,手机屏幕,相机屏幕显示大小一切的一切都搞明白了! 先说图片X×dpi=点数dotX是图片实际尺寸,简单点,我们只算图片的高吧,比如说拍了张图片14 ...

随机推荐

  1. Nginx 独立图片服务器的搭建

    为什么需要独立图片服务器? 如果你留心的话,可以发现,现在主流的网站都是有单独的图片服务器的,例如,人人网的为rrimg,淘宝的为taobaocdn,下面还有很多的二级域名. 独立的图片服务器有诸多好 ...

  2. H5非主体结构元素

    1.header元素:页面中一个内容区块或整个页面的标题: 具有引导和导航作用的结构元素,通常用来放置整个页面或页面内的一个内容区块的标题,也可以包含数据表格.搜索表单或相关的logo图片. 一个网页 ...

  3. SVN遇到Can't convert string from 'UTF-8' to native encoding

    刚配好mysql,svn co代码的时候遇到问题 svn: Can't convert string from 'UTF-8' to native encoding: svn: platform/co ...

  4. codevs 1066 引水入城

    传送门 题目描述 Description 在一个遥远的国度,一侧是风景秀美的湖泊,另一侧则是漫无边际的沙漠.该国的行政 区划十分特殊,刚好构成一个N行M列的矩形,如上图所示,其中每个格子都代表一座城 ...

  5. druid配置（转）

    java程序很大一部分要操作数据库,为了提高性能操作数据库的时候,有不得不使用数据库连接池.数据库连接池有很多选择,c3p.dhcp.proxool等,druid作为一名后起之秀,凭借其出色的性能,也 ...

  6. explain简介

    EXPLAIN显示了MySQL如何使用索引来处理SELECT语句以及连接表.可以帮助选择更好的索引和写出更优化的查询语句. 使用方法,在select语句前加上EXPLAIN就可以了: 如: EXPLA ...

  7. lc面试准备：Remove Duplicates from Sorted List

    1 题目 Given a sorted linked list, delete all duplicates such that each element appear only once. For ...

  8. Haskell缩进规则

    Haskell也是使用缩进来表示一个表达式或者块延伸的范围的,这点与Python类似.Haskell的缩进规则简单总结起来只用下面三条:    1. 源文件中第一个顶级的定义或者声明的缩进,定义了该文 ...

  9. 【HDOJ】1422 重温世界杯

    简单题. #include <stdio.h> #define MAXN 100005 int wi[MAXN], li[MAXN]; ]; int main() { int n, tot ...

  10. 依据 smtp协议的简单golang 的发邮件实现

    依据 smtp协议的简单golang 的发邮件实现 协议格式如下 From:sender_user@demo.net To:to_user@demo.net Subject:这是主题 Mime-Ver ...