touchJs实现手机端整屏滑动插件

touchJs实现手机端整屏滑动插件

jQuery移动端整屏滑动插件touchJs,请在移动端预览查看最佳展示效果。

JS代码
在页面引入需要用到的JS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
        $(function () {
            var touchB = true;
            var curpage = $('.curpage');
            var scrollH = $('#pro').height();
            parr = curpage.find('.p');
            var curp = 0;

            touch.on(document, 'swipeup swipedown', function (ev) {
                if (!touchB) {
                    return;
                }
                if (ev.type == 'swipeup') {
                    if (curp == parr.length - 1) {
                        return;
                    }
                    curp++;
                    $('.curpage').animate({top: -(scrollH * curp) + 'px'});
                    return;
                }
                if (ev.type == 'swipedown') {
                    if (curp == 0) {
                        $(".page0 ul li").css({"opacity":"0"})
                        return;
                    }
                    curp--;
                    $('.curpage').animate({top: -(scrollH * curp) + 'px'});
                    return;
                }
            });
        })

HTML结构

1
2
3
4
5
6
7
8
9
10
11
<div id="pro">
    <div id="box" class="page curpage">
        <div class="page0 p curp "><h1>第一页</h1></div>
        <div class="page1 p "><h1>第二页</h1></div>
        <div class="page2 p"><h1>第三页</h1></div>
        <div class="page3 p"><h1>第四页</h1></div>
        <div class="page4 p"><h1>第五页</h1></div>
        <div class="page5 p"><h1>第六页</h1></div>
        <div class="page6 p"><h1>第七页</h1></div>
    </div>
</div>
当前内容只有登录了才能查看,如果您已经注册,请登录
2

发表评论