。。等等，首先申明下，最终效果只是个模拟效果，iPad、iPhone里估计是“scrollable”（猜的，别扔砖哦），PC里将借用jQuery特效对象draggable。。

。。这就开始吧。。全部页内容横向展开，但用OVERFLOW:hidden卡住后只显示当前页。为此效果定义划屏页对象FlyPage，例如：

  var e = Hp.FlyPage;  

。。初始时处理有：页内容块、页码、当前页、划屏特效对象等

 init: function() { 

    e.flyDiv = $(".hpFP .hpFP_content");    e.dotPage = $(".hpFP_dot .hpFP_dotPaging");    e.pageCount = $(".hpFP_box .hpFP_slide").length;    e.flyWidth = $(".hpFP .hpFP_box").width();    e.pageIndex = 0;    e.flyDiv.draggable ({。。。    });

   }

。。关键性处理1：无论划屏偏移多少，用户体验是只向该方向最多划一屏，那么对当前的页码处理即可控制

      e.stopx=this.offsetLeft;      var s=e.beginx-e.stopx;      var d = s>0?-1:1;      if((e.pageIndex - d) < e.pageCount && (e.pageIndex - d) >= 0){       e.pageIndex -= d;      }  

。。关键性处理2：除了划屏功能，也需满足快速定位页，那么对页定位和页内容的处理要一致

    this.dotPage.find('div').click(function(){     e.pageIndex = $(this).index();   　　　})  

。。关键性处理3：划屏或快速定位页都需要jQuery动画来支持，一个方法搞定它，让代码整洁优雅点（呵呵，自夸！别扔砖）

   processAnimating: function() {    this.dotPage.find('div').removeClass('hover current').eq(this.pageIndex).addClass('current');    this.flyDiv.animate({left : -(this.flyWidth*this.pageIndex)+'px'}, this.delay);   }  

。。看完以上这么残缺的代码请别着急，后面有较完整的代码可以展开查看。。

。。细节性处理：自认为jQuery好玩的地方其实体现在小细节上，照以前可能需一大堆代码才能同效实现，然而它可如此简单写之，爽！（虽小菜，取其味）

    this.dotPage.find('div:first').addClass('current').end().find('div').click(function(){...    }).hover(function(){$(this).not('.current').addClass('hover');},function(){$(this).not('.current').removeClass('hover');});  

 

。。生产实现：较完整代码参考如下，或在线参考实例，因本随笔只分享jQuery，故CSS部分不再展开，见谅。

  if (typeof window.Hp == "undefined") window.Hp = {};  if (typeof window.Hp.FlyPage == "undefined") window.Hp.FlyPage = {      isInitialized: false,      flyDiv: null,      dotPage: null,      pageCount: 0,      flyWidth: 0,      pageIndex: 0,      beginx: 0,      stopx: 0,      delay: 0,      processAnimating: function() {          this.dotPage.find('div').removeClass('hover current').eq(this.pageIndex).addClass('current');          this.flyDiv.animate({left : -(this.flyWidth*this.pageIndex)+'px'}, this.delay);      },      createDotPage: function() {          var d = [];          for(var i=1; i <= this.pageCount; i++) {              d[d.length] = '<div title="' + i +'"class=""><img src="/s/i_bg/sprite.png" alt="' + i + '"></div>';          }          this.dotPage.append(d.join(''));          this.dotPage.find('div:first').addClass('current').end().find('div').click(function(){              var e = Hp.FlyPage;              e.pageIndex = $(this).index();              e.processAnimating();          }).hover(function(){$(this).not('.current').addClass('hover');},function(){$(this).not('.current').removeClass('hover');});      },          init: function() {          var e = Hp.FlyPage;          if (e.isInitialized) return;          e.isInitialized = true;          e.flyDiv = $(".hpFP .hpFP_content");          e.dotPage = $(".hpFP_dot .hpFP_dotPaging");          e.pageCount = $(".hpFP_box .hpFP_slide").length;          e.flyWidth = $(".hpFP .hpFP_box").width();          e.flyDiv.css("width",  e.pageCount* e.flyWidth);          e.pageIndex = 0;          e.beginx=0;          e.stopx=0;          e.delay = 500;          e.createDotPage();          e.flyDiv.draggable ({              axis:'x',              handle:'div',              start:function(event,ui){                    var e = Hp.FlyPage;                  e.beginx=this.offsetLeft;                    e.stopx=0;                },              stop:function(event,ui){                    var e = Hp.FlyPage;                  e.stopx=this.offsetLeft;                  var s=e.beginx-e.stopx;                  var d = s>0?-1:1;                  if((e.pageIndex - d) < e.pageCount && (e.pageIndex - d) >= 0){                      e.pageIndex -= d;                  }                  e.processAnimating();              }          });      }  };

  .hpFP_box {      POSITION: relative;WIDTH: 670px;FLOAT: left;HEIGHT: 625px;OVERFLOW: hidden;CURSOR:pointer  }  .hpFP_content {      POSITION: absolute;WIDTH: 1000px;FLOAT: left;LEFT: 0px  }  .hpFP_slide {      PADDING-LEFT:19px; PADDING-RIGHT:19px; WIDTH: 632px;FLOAT: left;HEIGHT: 625px  }  .hpFP_dot A IMG {      POSITION: relative  }  .hpFP_dotPaging DIV IMG {      POSITION: relative  }  .hpFP_dot {      Z-INDEX: 3; POSITION: absolute; MIN-HEIGHT: 33px; WIDTH: 100%; OVERFLOW: hidden; RIGHT: 0px; BOTTOM: 1px;  }  .hpFP_dotPaging {      POSITION: absolute; LEFT: 9px; TOP: 4px  }  .hpFP_dotPaging DIV {      POSITION: relative; WIDTH: 9px; DISPLAY: block; FLOAT: left; HEIGHT: 9px; MARGIN-LEFT: 39px; OVERFLOW: hidden  }  .hpFP_dotPaging DIV IMG {      BACKGROUND-POSITION: -18px -124px; TOP: -124px; LEFT: -18px  }  .hpFP_dotPaging DIV.current IMG {      BACKGROUND-POSITION: 0px -124px; TOP: -124px; LEFT: 0px  }  .hpFP_dotPaging DIV.hover IMG {      BACKGROUND-POSITION: -37px -124px; TOP: -124px; LEFT: -37px  }  .dark .hpFP_dotPaging DIV IMG {      BACKGROUND-POSITION: -56px -124px; TOP: -124px; LEFT: -56px  }  .dark .hpFP_dotPaging DIV.current IMG {      BACKGROUND-POSITION: -37px -124px; TOP: -124px; LEFT: -37px  }  .dark .hpFP_dotPaging DIV.hover IMG {      BACKGROUND-POSITION: 0px -124px; TOP: -124px; LEFT: 0px  }

。。总结：因为只是模拟，所以局限的地方也不少。前阵子想实现模拟划屏才第一次玩起了jQuery，等到实现了后，我用iPad2划屏，实际不好使！因为apple的东东似乎是对scroll做特殊处理，动态出现，静止隐藏。所以页码区的处理还是很有用的，否则iPad就看不全内容了。为了满足在iPad的Safari中好点中“圆点”页码，需要留出足够的间距。这样以来页码区的总页数就比较有限，第二个局限性也随之体现，这种模拟特效较适用于少数几页的内容展示。当然，如果花稍多些的jQuery技术，还可以异步取数，模板动态组装它，或许会完善很多。

。。尾声：因为是在博客里第一次发随笔，方方面面需要适应，请大家多指教。今天申请开通博客的理由还记得大约是（“以前工作太忙，只是学习，现在终于有时间和机会了，很高兴和大家交流、分享。应句江湖话，到了该还‘钱’的时候了，呵呵呵。。。”）

 

资源说明：jQuery生产代码请从jQuery官网下载，draggable对象请从jQueryUI下载，语法或详细用法可从Visual jQuery在线参考，其它资源请相应修订。