直接上代码了 仔细看看例子就会明白 简单实用

 <!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 green solid;

             overflow: hidden;

         }

         .inner {

             width: 4816px;

             height: 302px;

             border: solid 1px red;

         }

         .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;

         }

         .test{

             width: 7px;

 height: 7px;

 display: inline-block;

 position: absolute;

 right: 5px;

 bottom: 20px;

 border-bottom: 3px solid #666;

 border-right: 3px solid #666;

 -webkit-transform: rotate(45deg);

         }

     </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>

 <span class="test"></span>

 <script type="text/javascript" src="js/jquery-1.7.1.js"></script>

 <script type="text/javascript" src="js/Flipsnap%20.js"></script>

 <!-- 下面为了省事，例子4、6、7 使用了jquery-->

 <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() {

     //        //filter 为jquery的筛选器，筛选出与指定表达式匹配的元素集合

     //        $pointer.filter('.color').removeClass('color');

     //        $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 spanobj = $(".pointer span");

     var flipsnap = Flipsnap('.inner', {

         distance: 602,

         disableTouch: true     //true 鼠标不可拖动;  false 鼠标可拖动

     });

     flipsnap.element.addEventListener('fsmoveend', function() {

         spanobj.filter('.color').removeClass('color')

         spanobj.eq(flipsnap.currentPoint).addClass('color');

     });

     $('.go').click(function() {

         setInterval(function() {

            if(flipsnap.hasNext()){

                 flipsnap.toNext();

            }else{

               flipsnap.moveToPoint(0)

            }

         }, 1000)

         // flipsnap.toPrev();    //移动到上一元素

     });

 </script>

 </body>

 </html>

Wap touch flispan demo的更多相关文章

  1. [转]初探 PhoneGap 框架在 Android 上的表现

    原文地址:http://topmanopensource.iteye.com/blog/1486929 phonegap是由温哥华的一家小公司研发的多平台的移动开发框架,支持流行的大多数移动设备(iP ...

  2. 与众不同 windows phone (25) - Input（输入）之捕获 UIElement 之外的触控操作, Silverlight 方式捕获手势操作, XNA 方式捕获手势操作, 多点触控

    原文:与众不同 windows phone (25) - Input(输入)之捕获 UIElement 之外的触控操作, Silverlight 方式捕获手势操作, XNA 方式捕获手势操作, 多点触 ...

  3. NFS、FTP介绍

    第二十五课 NFS.FTP介绍 目录 一. NFS介绍 二.NFS服务端安装配置 三.NFS配置选项 四.exportfs命令 五.NFS客户端问题 六.FTP介绍 七.使用vsftpd搭建ftp 八 ...

  4. 自己定义ViewGroup实现仿淘宝的商品详情页

    近期公司在新版本号上有一个须要. 要在首页加入一个滑动效果, 详细就是仿照X宝的商品详情页, 拉到页面底部时有一个粘滞效果, 例如以下图 X东的商品详情页,假设用户继续向上拉的话就进入商品图文描写叙述 ...

  5. docker数据卷(转)

    原文地址:http://www.cnblogs.com/zydev/p/5809616.html Docker-数据卷和数据容器卷 容器中管理数据主要有两种方式: 数据卷(Data Volumes) ...

  6. LR11.5 安卓模拟器性能测试

    LR11.5 安卓模拟器性能测试 上一篇 / 下一篇  2013-07-04 08:07:19 / 个人分类:相关知识 查看( 1172 ) / 评论( 1 ) / 评分( 0 / 0 ) 1.首先下 ...

  7. In a Web Application and Mobile (hybrid), how to know which this platform running?

    needed depending on the platform to change the CSS to suit the size of the font. for example the DbG ...

  8. jquery手指触摸滑动放大图片的方法(比较靠谱的方法)

    jquery手指触摸滑动放大图片的方法(比较靠谱的方法) <pre><!DOCTYPE html><html lang="zh-cn">< ...

  9. PhoneGap架构基础及工作原理介绍

    转自:http://mobile.51cto.com/others-308545.htm 本篇文章从PhoneGap由来.功能以及工作原理,力争由浅入深介绍PhoneGap框架.   为什么需要Pho ...

随机推荐

  1. 【转】ubuntu12.04下安装chrome浏览器

    原文网址:http://blog.163.com/zhou_411424/blog/static/197362156201331931313549 下载google chrome deb包 32位:h ...

  2. Asp.net MVC中的ViewData与ViewBag（转）

    在Asp.net MVC 3 web应用程序中,我们会用到ViewData与ViewBag,对比一下: ViewData ViewBag 它是Key/Value字典集合 它是dynamic类型对像 从 ...

  3. 解决IE6 IE7 JSON.stringify JSON 未定义问题

    在项目中引入json2.js 官方http://www.json.org/ 源码地址:https://github.com/douglascrockford/JSON-js $.ajax({ url: ...

  4. Merge Sorted Array 解答

    Question Given two sorted integer arrays nums1 and nums2, merge nums2 into nums1 as one sorted array ...

  5. SOCKET 实现NAT 穿越

    在当前IPv4NAT盛行的网络环境下,两个用户要直接进行P2P连接是非常困难的.较好的解决办法是借助含公网的用户或是服务器中介实现P2P连接. NAT:Network Address Translat ...

  6. hdu 1561 The more, The Better_树状dp

    题目链接 题意:给你一棵树,各个节点都有价值(除根节点),从根节点出发,选择m个节点,问最多的价值是多小. 思路:很明显是树状dp,遍历树时背包最优价值,dp[i][k]=max{dp[i][r]+d ...

  7. ofbiz安装优化

    一. 1.安装jdk 2.安装数据库 3.安装ant yum install ant 4.编译启动ofbiz cd /ofbiz目录下 ant run-install ./startofbiz.sh ...

  8. AsyncTask 与 对话框显示 view.WindowManager$BadTokenException: Unable to add window…is not valid; is your a

    最近遇到一个奇葩的问题,好郁闷 之前也没有仔细看.问题偶尔出现一次.再去查看日志时,出现 view.WindowManager$BadTokenException: Unable to add win ...

  9. 《Java程序员面试笔试宝典》之volatile有什么作用

    在由Java语言编写的程序中,有时候为了提高程序的运行效率,编译器会自动对其进行优化,把经常被访问的变量缓存起来,程序在读取这个变量的时候有可能会直接从缓存(例如寄存器)中来读取这个值,而不会去内存中 ...

  10. Hibernate(四)——缓存策略+lazy

    Hibernate作为和数据库数据打交道的框架,自然会设计到操作数据的效率问题,而对于一些频繁操作的数据,缓存策略就是提高其性能一种重要手段,而Hibernate框架是支持缓存的,而且支持一级和二级两 ...