第一次玩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 Code

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

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在线参考，其它资源请相应修订。

优质内容筛选与推荐>>
1、SpringBoot(五)：springdatajpa的使用
2、[转]程序员你为什么这么累？
3、AI如何变革阿里电商？iDST首席科学家任小枫首次公开演讲
4、网卡自适应带来的麻烦
5、（重载）厚土Go学习笔记|04.导入和导出的不同用math.Pi来举例

0 │ 收藏 │ 举报

朋友将在看一看看到

分享想法到看一看