javascriptFuction/swipeNav.html at master · jsoncode/javascriptFuction · GitHub

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title v-text="title">swipe nav</title>
    <style>
    html,
    body,
    .content {
        height: 100%;
    }
    body{
    	margin: 0;
    }
    </style>
</head>

<body>
    <section class="content nav-hands">
        <div class="container">
            page content
                <button type="button" onclick="swipeNav.show()">显示导航</button>
        </div>
    </section>
    <nav class="app-swiper-nav" style="display:none;">
        <div class="nav-container">
            <div class="nav-innner">
                nav content
            </div>
        </div>
    </nav>
    <script>
    window.addEventListener('load',function(){
    	swipeNav.init();
    });
    var swipeNav = {
        mobile: /Mobile/i.test(navigator.userAgent),
        weixin: /MQQBrowser|qq/i.test(navigator.userAgent),
        nav: document.querySelector('.app-swiper-nav'), //导航区域
        hands: document.querySelector('.nav-hands'), //用来显示导航的手柄区域
        bgImg: 'static/img/bg2.jpg', //导航背景图片
        duration: 300, //导航过度时常
        moveStart: 0, //关闭时 开始位置
        movePosition: 0, //关闭时 移动位移
        moveTime: 0, //关闭时 动态过度时常
        moveSpeed: 0, //关闭时 动态速度
        moveCanHide: 0, //关闭时 是否满足隐藏条件
        moveArea: 1 / 3, //关闭时 隐藏条件，距离屏幕边缘的百分百

        handsStart: 0, //开启时 开始位置
        handsPosition: 0, //开启时 移动位移
        handsTime: 0, //开启时 动态过度时常
        handsSpeed: 0, //开启时 动态速度
        handsCanShow: false, //开启时 是否满足隐藏条件
        handsArea: (function() { //开启时 隐藏条件，距离屏幕边缘的百分百
            return 1 / (this.weixin ? 3 : 4);
        })(),
        /*导航样式*/
        style: '.app-swiper-nav,.app-swiper-nav *{box-sizing: border-box;}.app-swiper-nav {position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 101; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .app-swiper-nav .nav-container {position: relative; top: 0; left: 0; width: 100%; max-width: 300px; height: 100%; overflow: hidden; box-shadow: 1px 0 10px rgba(0, 0, 0, 0.5); } .app-swiper-nav .nav-container .nav-innner {position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 103; color: #fff; overflow-x: hidden; overflow-y: auto; } .app-swiper-nav .nav-container .nav-before-bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 102; background-color: rgba(0, 0, 0, .2); } .app-swiper-nav .nav-container .nav-after-bg {position: absolute; top: -25px; left: -25px; width: 100%; height: 100%; box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; -webkit-filter: blur(15px); -moz-filter: blur(15px); -ms-filter: blur(15px); filter: blur(15px); padding: 25px; background-repeat: no-repeat; background-position: center; background-size: cover; background-color: #3d3d3d; z-index: 101; } .mobile.app-swiper-nav {background-color: rgba(0, 0, 0, 0.5); } .weixin.app-swiper-nav .nav-container .nav-after-bg {-webkit-filter: blur(0px); -moz-filter: blur(0px); -ms-filter: blur(0px); filter: blur(0px); }.nav-hands{overflow:auto;}',
        touchHands: function(event) {
            // 通过手柄显示导航
            // 微信中禁止手势默认行为
            if (this.weixin) event.preventDefault();
            switch (event.type) {
                case 'touchstart':
                    this.handsCanShow = event.changedTouches[0].pageX < innerWidth * this.handsArea;
                    if (this.handsCanShow) {
                        this.handsTime = new Date().getTime();
                        this.handsStart = event.changedTouches[0].pageX;
                    }
                    break;
                case 'touchmove':
                    if (this.handsCanShow) {
                        this.handsPosition = event.changedTouches[0].pageX - this.handsStart;
                        if (event.changedTouches[0].pageX > innerWidth) {
                            this.handsPosition = innerWidth - this.handsStart
                        }
                        // 手势跟随
                        this.nav.style = this.translate3d(this.handsPosition - innerWidth, 0);
                    }
                    break;
                case 'touchend':
                    if (this.handsCanShow) {
                        this.handsSpeed = this.handsPosition / (new Date().getTime() - this.handsTime);
                        var time = this.duration;
                        if (this.handsPosition > innerWidth / 2 || this.handsSpeed > 0.5) {
                            time = (innerWidth - this.handsPosition) / this.handsSpeed;
                            if (time > this.duration) {
                                time = this.duration;
                            }
                            this.show(time);
                        } else {
                            time = this.handsPosition / innerWidth / 2 * 1000;
                            this.hide();
                        }
                    }
                    break;
                default:
                    break;
            }
        },
        touchEvent: function(event) {
            switch (event.type) {
                case 'touchstart':
                    // 禁用默认行为
                    if (this.weixin) event.preventDefault();
                    this.moveCanHide = event.changedTouches[0].pageX > innerWidth * (1 - this.moveArea);
                    if (this.moveCanHide) {
                        //记录开始时间
                        this.moveTime = new Date().getTime();
                        //记录最初位置
                        this.moveStart = event.changedTouches[0].pageX;
                    }
                    break;
                case 'touchmove':
                    if (this.moveCanHide) {
                        //移动距离，取整
                        this.movePosition = Math.ceil(event.changedTouches[0].pageX - this.moveStart);
                        if (this.movePosition > 0) this.movePosition = 0;
                        // 取绝对值
                        this.movePosition = Math.abs(this.movePosition);
                        // 手势跟随
                        this.nav.style = this.translate3d(-this.movePosition, 0);
                    }
                    break;
                case 'touchend':
                    if (this.moveCanHide) {
                        // 滑动速度
                        this.moveSpeed = this.movePosition / (new Date().getTime() - this.moveTime);
                        // 过度时间
                        var time = self.duration;
                        // 划过半屏，快速滑动
                        if (this.movePosition > innerWidth / 2 || this.moveSpeed > 0.5) {
                            // 滑动结束后，剩余的距离需要的过度时间
                            time = (innerWidth - this.movePosition) / this.moveSpeed;
                            // 防止时间过长，过度太慢
                            if (time > this.duration) {
                                time = this.duration;
                            }
                            // 收起导航
                            this.hide(time);
                        } else {
                            //  滑动结束后，划过的距离需要的过度时间
                            time = this.movePosition / innerWidth / 2 * 1000;
                            // 显示导航
                            this.show(time);
                        }
                    }
                    break;
                default:
                    break;
            }
        },
        show: function(time) {
            var t = time || this.duration;
            this.nav.style = this.translate3d(0, t);
        },
        hide: function(time) {
            var t = time || this.duration;
            this.nav.style = this.translate3d(-innerWidth, t);
        },
        init: function() {
            var self = this;
            /*add style*/
            var style = document.createElement('style');
            style.innerHTML = this.style;
            document.querySelector('head').appendChild(style);
            /*add before*/
            var before = document.createElement('div');
            before.className = 'nav-before-bg';
            this.nav.querySelector('.nav-container').appendChild(before);
            /*add after*/
            var after = document.createElement('div');
            after.className = 'nav-after-bg';
            after.style.backgroundImage = 'url(' + self.bgImg + ')';
            this.nav.querySelector('.nav-container').appendChild(after);
            /*hide nav*/
            self.nav.style = self.translate3d(-innerWidth, self.duration);
            /*add class*/
            if (this.mobile) self.nav.classList.add('mobile');
            if (this.weixin) self.nav.classList.add('weixin');
            /*mobile hide listener*/
            self.nav.addEventListener('touchstart', function(event) {
                self.touchEvent(event)
            });
            self.nav.addEventListener('touchmove', function(event) {
                self.touchEvent(event)
            });
            self.nav.addEventListener('touchend', function(event) {
                self.touchEvent(event)
            });
            /*mobile show listener*/
            self.hands.addEventListener('touchstart', function(event) {
                self.touchHands(event)
            });
            self.hands.addEventListener('touchmove', function(event) {
                self.touchHands(event)
            });
            self.hands.addEventListener('touchend', function(event) {
                self.touchHands(event)
            });
            /*pc hide nav*/
            document.addEventListener('click', function() {
                if (event.target.className == self.nav.className) self.hide(1000);
            })
            return self;
        },
        translate3d: function(x, time) {
            return 'transform:translate3d(' + x + 'px,0,0);' +
                'transition-duration:' + time + 'ms;';
        }
    };
    </script>
</body>

</html>