第一次玩jQuery，和大家分享下iPad、iPhone划屏效果

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

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

var e = Hp.FlyPage;

1. 初始时处理：

页内容块、页码、当前页、划屏特效对象等。

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 ({。。。
});

}

2. 关键性处理：

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

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

3. 关键性处理：

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

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

4. 关键性处理：

划屏或快速定位页都需要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);
}

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

5. 细节性处理：

自认为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');});

6. 生产实现：

较完整代码参考如下，或在线《参考实例》。因本随笔只分享jQuery，故HTML和CSS部分不再展开讨论。

View CSS

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

7. 总结：

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

8. 尾声：

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

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