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

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

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

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

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>水平切换 demo</title>
  6. <meta name="Keywords" content="">
  7. <meta name="author" content="@my_programmer">
  8. <style type="text/css">
  9. /*重置{*/
  10. body,div,span{ padding:0;margin:0;}
  11. /*}重置*/
  12. .all{width:602px;height:302px;margin:100px auto 0;border:2px red solid;overflow:hidden;}
  13. .inner{width:4816px;height:302px;}
  14. .inner>div{width:600px;height:300px;border:1px blue solid;float:left;font-size:80px;font-weight:bold;text-align:center;line-height:300px;}
  15. .pointer{width:256px;margin:20px auto;overflow:hidden;}
  16. .pointer>span{float:left;width:20px;height:20px;border-radius:50%; margin:0 5px;border:1px #000 solid;}
  17. .color{background:#ff0;}
  18. </style>
  19. </head>
  20. <body>
  21.     <div class="all">
  22.         <div class="inner">
  23.             <div>1</div>
  24.             <div>2</div>
  25.             <div>3</div>
  26.             <div>4</div>
  27.             <div>5</div>
  28.             <div>6</div>
  29.             <div>7</div>
  30.             <div>8</div>
  31.         </div>
  32.     </div>
  33.     <div class="pointer" id="pointer">
  34.         <span class="color"></span>
  35.         <span></span>
  36.         <span></span>
  37.         <span></span>
  38.         <span></span>
  39.         <span></span>
  40.         <span></span>
  41.         <span></span>
  42.     </div>
  43.     <div style="margin:0px auto;width:80px;" class="go">
  44.         <input type="button" value="go" style="width:50px;height:30px;"/>
  45.     </div>
  46.     <script src="jquery.js"></script>    <!-- 下面为了省事，例子4、6、7 使用了jquery-->
  47.     <script src="flipsnap.js"></script>
  48.     <script type="text/javascript">
  49.  
  50.     /*1.简单水平拖动*/
  51.         Flipsnap('.inner');    //移动次数为子元素个数减一    
  52.  
  53.     /*2.设定每次移动的距离*/
  54.         //Flipsnap('.inner',{
  55.             //distance:602    //每次移动的距离，移动次数为子元素个数减一；注意：此处不能有分号,可以有逗号
  56.         //});
  57.  
  58.     /*3.设定每次移动的距离,和，最多移动的次数*/
  59.         //Flipsnap('.inner',{
  60.             //distance:602,
  61.             //maxPoint:7        //最多移动的次数
  62.         //});
  63.  
  64.     /*4.绑定事件*/
  65.         /*var $pointer=$('.pointer span');
  66.         var flipsnap=Flipsnap('.inner',{distance:602});
  67.         flipsnap.element.addEventListener('fsmoveend',function(){
  68.             $pointer.filter('.color').removeClass('color');            //filter 为jquery的筛选器，筛选出与指定表达式匹配的元素集合
  69.             $pointer.eq(flipsnap.currentPoint).addClass('color');
  70.         },false);*/
  71.  
  72.     /*5.refresh 刷新*/
  73.         //var flipsnap=Flipsnap('.inner');
  74.             //flipsnap.refresh();        //刷新当前页面，当屏幕切换时，此代码就派上用场了
  75.     /*6.移动到指定位置,鼠标不可拖动 */
  76.         /*var flipsnap = Flipsnap('.inner', {
  77.             distance: 602,
  78.             disableTouch: true     //true 鼠标不可拖动;  false 鼠标可拖动
  79.         });
  80.         $('.go').click(function() {
  81.             //flipsnap.moveToPoint(3);    //移动到指定位置,第n+1个
  82.             flipsnap.toNext();    //移动到下一元素
  83.             //flipsnap.toPrev();    //移动到上一元素
  84.         });*/
  85.  
  86.     /*7.next, prev*/
  87.         /*var flipsnap = Flipsnap('.inner', {
  88.             distance: 602,
  89.             disableTouch: true     //true 鼠标不可拖动;  false 鼠标可拖动
  90.         });
  91.         $('.go').click(function() {
  92.             flipsnap.toNext();    //移动到下一元素
  93.             //flipsnap.toPrev();    //移动到上一元素
  94.         });*/
  95.  
  96.     </script>
  97. </body>
  98. </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. print,print_r,echo,var_dump,var_export比较

    print string 1个参数 返回1 语言结构echo 多个string 无返回 语言结构 print_r array 如果想捕捉 print_r() 的输出,可使用 return 参数.若此参 ...

  2. Python 基础-python-列表-元组-字典-集合

    列表格式:name = []name = [name1, name2, name3, name4, name5] #针对列表的操作 name.index("name1")#查询指定 ...

  3. Python 关于正负无穷float(‘inf’)的一些用法

    Python中可以用如下方式表示正负无穷: float("inf"), float("-inf") 利用 inf 做简单加.乘算术运算仍会得到 inf > ...

  4. failure injection

    (1)malloc穷尽的情况: 假设下面的代码是测试代码,里面含有被测函数fmalloc,其中含有一个malloc语句,在一般情况下,是很难走到malloc失败的分支的,因为很难模拟系统内存耗尽的情况 ...

  5. Cinder-2 窗口的创建过程

    通过TinderBox生成的代码很简单,整个代码如下: #include "cinder/app/AppNative.h" #include "cinder/gl/gl. ...

  6. MVC简单分页（未实现无刷新分页）

    分页Html辅助方法 using System.Text; using System.Web: using System.Web.Mvc; namespace System.Web.Mvc { pub ...

  7. 第一个deeplearning4jproject跑起

    deeplearning4j是基于java的深度学习库,当然,它有许多特点,但暂时还没学那么深入,所以就不做介绍了 需要学习dl4j,无从下手,就想着先看看官网的examples,于是,下载了exam ...

  8. 【UVA10829】 L-Gap Substrings （后缀数组）

    Description If a string is in the form UVU, where U is not empty, and V has exactly L characters, we ...

  9. uva 11731 - Ex-circles

    题意:已知三角形ABC的3条边长,求三角形ABC 的面积,以及阴影部分的总面积. #include<iostream> #include<cstdio> #include< ...

  10. 关于Android4.2后WebView的js方法需要加@JavascriptInterface

    解读: targetSdkVersion>=17时,需要加上@JavascriptInterface,否则报错Uncaught TypeError: Object [object Object] ...