前言：整理下自己写H5时常用的库或是框架，以便自己熟记在心。
swiper.js
Swiper常用于移动端网站的内容触摸滑动
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。
Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
swiper-banner
示例：
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>swiper-banner</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <link href="https://cdn.bootcss.com/Swiper/4.3.0/css/swiper.min.css" rel="stylesheet"> </head> <style> body{ margin: 0; } #banner { width: 100%; overflow: hidden; position: relative; } #banner .swiper-slide { width: 100%; position: relative; text-align: center; } #banner img { max-width: 100%; display: block; } #banner h2 { text-align: center; font-size: 1em; height: 42px; line-height: 42px; color: #fafafa; position: absolute; left: 0; bottom: 0; right: 0; font-weight: normal; text-shadow: 1px 1px 1px #000; /* background-color: rgba(21,20,20,0.5); */ background-color: rgba(0,0,0,0); background: -moz-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.7)); background: -webkit-gradient(linear,top,from(rgba(0,0,0,0)),to(rgba(0,0,0,0.7))); background: -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.7)); background: -o-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.7)); } #banner .pagination { position: absolute; z-index: 20; bottom: 0; text-align: center; } #banner .swiper-pagination-bullet-active { background: #ff6600!important; } #banner .swiper-pagination-bullet { display: inline-block; width: 5px; height: 5px; border-radius: 5px; background: #fff; margin: 0 2px; opacity: 0.8; cursor: pointer; } </style> <body> <!-- banner --> <div id="banner"> <!-- 轮播容器 --> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="01.jpg" alt=""> <h2>龙猫1</h2> </div> <div class="swiper-slide red-slide" > <img src="02.jpg" alt=""> <h2>龙猫2</h2> </div> <div class="swiper-slide"> <img src="03.jpg" alt=""> <h2>龙猫3</h2> </div> <div class="swiper-slide"> <img src="04.jpg" alt=""> <h2>龙猫4</h2> </div> </div> <!-- 前进 - 后退 --> <div class="swiper-button-prev"></div><!--左箭头--> <div class="swiper-button-next"></div><!--右箭头--> <!-- 分页 --> <div class="pagination"> <span class="swiper-pagination-bullet"></span> <span class="swiper-pagination-bullet"></span> <span class="swiper-pagination-bullet"></span> <span class="swiper-pagination-bullet"></span> </div> </div> </body> <script src="https://cdn.bootcss.com/Swiper/4.3.0/js/swiper.min.js"></script> <script> /*swiper-banner*/ var mySwiper = new Swiper('#banner', { autoplay:true,//等同于以下设置 /*autoplay: { delay: 3000, stopOnLastSlide: false, disableOnInteraction: true, },*/ pagination: { el:'.pagination', }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, loop : true, }); </script> </html> |
横向滑动
示例图：
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>横向滑动</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <link href="https://cdn.bootcss.com/Swiper/4.3.0/css/swiper.min.css" rel="stylesheet"> </head> <style> body{ margin: 0; } #header { position: absolute; left: 0; top: 0; z-index: 999; width: 100%; height: 43px; overflow: hidden; background: #fdfdfc; font: 12px/40px hiragino sans gb,microsoft yahei,simsun; box-shadow: 3px 3px 3px rgba(0,0,0,0.2); } #top-line { width: 100%; height: 3px; line-height: 0; font-size: 0; overflow: hidden; text-align: center; z-index: 1; background-color: #0fa6ea; background: -webkit-linear-gradient(left,rgba(15,166,234,1) 0,rgba(89,204,24,1) 10%,rgba(15,166,234,1) 60%,rgba(15,166,234,1) 100%); background: -moz-linear-gradient(left,rgba(15,166,234,1) 0,rgba(89,204,24,1) 10%,rgba(15,166,234,1) 60%,rgba(15,166,234,1) 100%); background: -ms-linear-gradient(left,rgba(15,166,234,1) 0,rgba(89,204,24,1) 10%,rgba(15,166,234,1) 60%,rgba(15,166,234,1) 100%); background: linear-gradient(left,rgba(15,166,234,1) 0,rgba(89,204,24,1) 10%,rgba(15,166,234,1) 60%,rgba(15,166,234,1) 100%); } #header .swiper-slide { padding: 0 20px; width: auto; } </style> <body> <!-- 横向滑动 --> <div id="header"> <div id="top-line"></div> <div class="swiper-wrapper"> <div class="swiper-slide">新闻</div> <div class="swiper-slide">财经</div> <div class="swiper-slide">娱乐</div> <div class="swiper-slide">体育</div> <div class="swiper-slide">订阅</div> <div class="swiper-slide">微博</div> <div class="swiper-slide">空间</div> <div class="swiper-slide">书城</div> </div> </div> </body> <script src="https://cdn.bootcss.com/Swiper/4.3.0/js/swiper.min.js"></script> <script> var navSwiper = new Swiper('#header', { freeMode: true, slidesPerView: 'auto', freeModeSticky: true, }); </script> </html> |
announcement（公告）
示例图：
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>announcement 公告</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <link href="https://cdn.bootcss.com/Swiper/4.3.0/css/swiper.min.css" rel="stylesheet"> </head> <style> body{ margin: 0; } #announcement { height: 2em; background: #f5f8fc; border: 1px solid #d2e1f1; margin: 0.5em; overflow: hidden; } #announcement a { color: #294c7f; text-decoration: none; display: block; line-height: 2; height: 2em; text-indent: 0.5em; } </style> <body> <!-- 横向滑动 --> <div id="announcement"> <div class="swiper-wrapper"> <div class="swiper-slide"><a href="#">头条消息1</a></div> <div class="swiper-slide"><a href="#">头条消息2</a></div> <div class="swiper-slide"><a href="#">头条消息3</a></div> <div class="swiper-slide"><a href="#">头条消息4</a></div> <div class="swiper-slide"><a href="#">头条消息5</a></div> </div> </div> </body> <script src="https://cdn.bootcss.com/Swiper/4.3.0/js/swiper.min.js"></script> <script> var announcementSwiper = new Swiper('#announcement', { direction: 'vertical', loop: true, autoplay: { delay: 3000, disableOnInteraction: false, } }) </script> </html> |
触屏Tab切换
示例图：
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab选项卡</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <link href="https://cdn.bootcss.com/Swiper/4.3.0/css/swiper.min.css" rel="stylesheet"> </head> <style> body,ul,li{ margin: 0; padding: 0; } li{ list-style: none; } .tabs { border-top: 2px solid #9ac7ed; background: url(headbg.png) no-repeat left top #f9fafa; background-size: auto 100%; width: 100%; height: 38px; overflow: hidden; } .tabs a.active { border-top: 2px solid #2a70be; margin-top: -2px; background-image: url(tab_ui.png); background-repeat: no-repeat; -webkit-background-size: 64px 39px; -moz-background-size: 64px 39px; -o-background-size: 64px 39px; background-size: 64px 39px; background-position: left top; color: #c14545; } .tabs a { font-weight: normal; text-align: center; float: left; width: 64px; height: 38px; line-height: 38px; color: #2a70be; text-decoration: none; } #tabs-container { height: 400px; } .news-list li { overflow: hidden; border-bottom: 1px solid #eceef0; box-shadow: 0 1px 1px #fff; font-weight: normal; height: 35px; line-height: 35px; font-size: 80%; } .news-list { padding: 0 10px; } </style> <body> <!-- tab --> <div class="tabs"> <a href="#" class="active">新闻</a> <a href="#" class="">社会</a> <a href="#" class="">娱乐</a> </div> <!-- tab container --> <div id="tabs-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <ul class="news-list"> <li>女子强行阻拦高铁发车 称其丈夫没上车</li> <li>小马奔腾创始人妻子被判赔2亿债务</li> <li>杭州女子将200平荒地改造成“秘密花园”</li> <li>“紫光阁饭店”事件，乌龙背后是热搜的生意</li> <li>最美乘务员冒雪挨个扶旅客下火车</li> <li>五月天周杰伦再度合体</li> <li>张馨予被赞模特身材</li> <li>惊呆，杨紫的脸现在跟脖子一样宽了！</li> <li>睡姿暴露你偷情指数</li> <li>济南小伙儿自掏腰包，为陌生农民工加菜</li> </ul> </div> <div class="swiper-slide"> <ul class="news-list"> <li>女子街边卖早餐卖蓝色油条生意火爆</li> <li>保定励志哥！坐着轮椅唱歌成网红</li> <li>电影院保安恋上女研究生</li> <li>19岁女生保送北大直博</li> <li>男子越狱期间强奸女友12岁的女儿</li> <li>8旬爷爷因三个孩子都不赡养</li> <li>7座面包车塞进20名学生</li> <li>老人做家务时羽绒服突然“爆炸”</li> <li>直播间里，用歌舞抗癌的70岁“网红”</li> <li>PG_ONE粉丝买热搜"紫光阁地沟油"</li> </ul> </div> <div class="swiper-slide"> <ul class="news-list"> <li>“绿帽门”后贾乃亮深夜买醉</li> <li>姚笛大方挥手无名指戒指抢眼</li> <li>汪小菲被大S减肥成果吓到</li> <li>Baby和秀智同穿18万仙女裙</li> <li>易烊千玺得罪粉丝？接机时粉丝不想理他</li> <li>Tara成员：送了跑车还有90亿</li> <li>蒋欣在节目上的表情超有戏</li> <li>李小璐最新写真曝光，大走稳重的知性风</li> <li>马思纯和欧豪穿同款秀恩爱</li> <li>第90届奥斯卡颁奖礼发海报</li> </ul> </div> </div> </div> </body> <script src="https://cdn.bootcss.com/Swiper/4.3.0/js/swiper.min.js"></script> <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script> var tabsSwiper = new Swiper('#tabs-container', { speed: 500, on: { slideChangeTransitionStart: function() { $(".tabs .active").removeClass('active'); $(".tabs a").eq(this.activeIndex).addClass('active'); } } }) $(".tabs a").on('click', function(e) { e.preventDefault() $(".tabs .active").removeClass('active') $(this).addClass('active') tabsSwiper.slideTo($(this).index()) }) </script> </html> |
zepto.js
better-scroll(bscroll.js)
better-scroll手册
上下拉回弹效果
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,user-scalable=no" /> <title>下上拉回弹</title> </head> <style> html{ font-size: 100%; } .wrapper{ width: 100vw; height: 100vh; /* 100 vw == 1可视区宽度 100 vh == 1可视区高度 */ overflow: hidden; } .wrapper ul{ padding: 1rem 1rem 2rem 1rem; } .scrollbar{ position: relative; } .scrollbar li{ display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin: 18px; padding-bottom: 18px; border-bottom: 1px solid rgba(7,17,27,0.1); } </style> <body> <div class="wrapper"> <ul class="scrollbar"> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> </ul> </div> </body> <script src="https://unpkg.com/better-scroll/dist/bscroll.min.js"></script> <script> let wrap = document.querySelector('.wrapper'); let list = document.querySelector('.scrollbar'); let bScroll = new BScroll(wrap,{ pullUpLoad: { threshold: 50 }, pullDownRefresh: { stop: 0 } }); </script> </html> |
监听上下拉
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,user-scalable=no" /> <title>监听下拉上拉</title> <!-- <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="normalize.css"> --> </head> <style> html{ font-size: 100%; } .wrapper{ width: 100vw; height: 100vh; /* 100 vw == 1可视区宽度 100 vh == 1可视区高度 */ overflow: hidden; } .wrapper .list{ padding: 1rem 1rem 2rem 1rem; } .list{ position: relative; } .list li{ display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin: 18px; padding-bottom: 18px; border-bottom: 1px solid rgba(7,17,27,0.1); } </style> <body> <div class="wrapper"> <ul class="list"> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> <li>下拉刷新上拉加载</li> </ul> </div> </body> <script src="https://unpkg.com/better-scroll/dist/bscroll.min.js"></script> <script> let wrap = document.querySelector('.wrapper'); let list = document.querySelector('.list'); let bScroll = new BScroll(wrap,{ pullUpLoad: { threshold: 20,//设置触发下拉回调的translateY值 }, pullDownRefresh: { stop: 0 } }); /* 下拉刷新 */ bScroll.on("pullingDown",function(){ console.log('被下拉了') list.classList.add("pullDown"); bScroll.finishPullDown(); bScroll.refresh(); list.classList.remove("pullDown"); }); /* BScroll 移动的是 wrap 下第0个子元素 */ bScroll.on("pullingUp",function(){ console.log('被上拉了'); list.classList.add("pullUp"); list.classList.remove("pullUp"); bScroll.finishPullUp(); bScroll.refresh(); }); </script> </html> |
indexList
|
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 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 |
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width,user-scalable=no" /> <meta charset="UTF-8"> <title>indexList</title> <style type="text/css"> ul { margin: 0; padding: 0; list-style: none; } .list-wrapper{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; background: #fff; } .index-list-content{ background: #fff; border-radius: 2px; } .index-list-title{ padding: 14px 16px; font-size: 14px; line-height: 1.6; color: #333; } .index-list-anchor{ padding: 16px 16px 10px 16px; line-height: 1; font-size: 14px; color: #999; background: #f7f7f7; } .index-list-item { position: relative; height: 50px; line-height: 50px; padding: 0 16px; font-size: 14px; color: #333; } .index-list-item:last-child{ border: none; } .index-list-item_active{ background: #ddd; } .index-list-fixed{ position: absolute; z-index: 1; top: 0; left: 0; width: 100%; padding: 16px 16px 10px 16px; box-sizing: border-box; font-size: 14px; line-height: 1; color: #999; background: #f7f7f7; } .index-list-nav { position: absolute; z-index: 30; right: 0; top: 50%; transform: translateY(-50%); font-family: Helvetica; } .index-list-nav ul { padding: 0; margin: 0; } .index-list-nav li{ padding: 6px 16px 0 16px; line-height: 1; text-align: center; box-sizing: border-box; font-size: 12px; color: gray; } .index-list-nav .active { color: blue; } </style> </head> <body> <div class="list-wrapper"> <div class="scroll-content"> <div class="index-list-content"> <div class="index-list-title"> 定位城市: 背景 </div> <ul> <li> <h2 class="index-list-anchor"> ★热门城市 </h2> <ul> <li class="index-list-item border-bottom-1px"> 北京市 </li> <li class="index-list-item border-bottom-1px"> 上海市 </li> </ul> </li> <li> <h2 class="index-list-anchor"> A </h2> <ul> <li class="index-list-item border-bottom-1px"> 鞍山市 </li> <li class="index-list-item border-bottom-1px"> 安庆市 </li> </ul> </li> <li> <h2 class="index-list-anchor"> B </h2> <ul> <li class="index-list-item border-bottom-1px"> 北京市 </li> <li class="index-list-item border-bottom-1px"> 巴音郭楞州 </li> <li class="index-list-item border-bottom-1px"> 博尔塔拉州 </li> </ul> </li> <li> <h2 class="index-list-anchor"> C </h2> <ul> <li class="index-list-item border-bottom-1px"> 成都市 </li> </ul> </li> <li> <h2 class="index-list-anchor"> E </h2> <ul> <li class="index-list-item border-bottom-1px"> 鄂尔多斯市 </li> <li class="index-list-item border-bottom-1px"> 鄂州市 </li> <li class="index-list-item border-bottom-1px"> 恩施州 </li> </ul> </li> <li> <h2 class="index-list-anchor"> F </h2> <ul> <li class="index-list-item border-bottom-1px"> 福州市 </li> <li class="index-list-item border-bottom-1px"> 佛山市 </li> <li class="index-list-item border-bottom-1px"> 防城港市 </li> </ul> </li> <li> <h2 class="index-list-anchor"> G </h2> <ul> <li class="index-list-item border-bottom-1px"> 广州市 </li> <li class="index-list-item border-bottom-1px"> 贵阳市 </li> </ul> </li> <li> <h2 class="index-list-anchor"> H </h2> <ul> <li class="index-list-item border-bottom-1px"> 杭州市 </li> <li class="index-list-item border-bottom-1px"> 和田地区 </li> </ul> </li> <li> <h2 class="index-list-anchor"> Z </h2> <ul> <li class="index-list-item border-bottom-1px"> 郑州市 </li> <li class="index-list-item border-bottom-1px"> 张家口市 </li> <li class="index-list-item border-bottom-1px"> 张家界市 </li> <li class="index-list-item border-bottom-1px"> 珠海市 </li> <li class="index-list-item border-bottom-1px"> 中山市 </li> <li class="index-list-item border-bottom-1px"> 自贡市 </li> <li class="index-list-item border-bottom-1px"> 资阳市 </li> <li class="index-list-item border-bottom-1px"> 枣庄市 </li> <li class="index-list-item border-bottom-1px"> 舟山 </li> <li class="index-list-item border-bottom-1px"> 遵义市 </li> <li class="index-list-item border-bottom-1px"> 淄博市 </li> <li class="index-list-item border-bottom-1px"> 株洲市 </li> <li class="index-list-item border-bottom-1px"> 中卫市 </li> </ul> </li> </ul> </div> </div> </div> <div class="index-list-nav"> <ul> <li data-index="0" class="active"> ★ </li> <li data-index="1"> A </li> <li data-index="2" class=""> B </li> <li data-index="3" class=""> C </li> <li data-index="4" class=""> E </li> <li data-index="5" class=""> F </li> <li data-index="6" class=""> G </li> <li data-index="7" class=""> H </li> <li data-index="8" class=""> Z </li> </ul> </div> <div class="index-list-fixed" style="display: none;"> A </div> <script type="text/javascript" src="https://unpkg.com/better-scroll/dist/bscroll.min.js.js"></script> <script> /* bscroll 使用 */ let listWrapper = document.querySelector('.list-wrapper'); let indexListNav = document.querySelector('.index-list-nav'); let indexListNavs = indexListNav.querySelectorAll('li'); let indexListFixed = document.querySelector('.index-list-fixed'); let indexList = new BScroll(listWrapper,{ probeType: 3 }); let indexListContent = document.querySelector('.index-list-content'); let indexLists = indexListContent.children[1].children; indexListNav.addEventListener('touchstart', function(e) { setIndex(e.changedTouches[0].clientY); }); indexListNav.addEventListener('touchmove', function(e) { setIndex(e.changedTouches[0].clientY); }); indexList.on("scroll",function(e){ let y = -e.y; if(y < indexLists[0].offsetTop){ setNav(0); indexListFixed.style.display = "none"; return ; } indexListFixed.style.display = "block"; for(var i = 0; i < indexLists.length - 1; i++){ if(y >= indexLists[i].offsetTop && y < indexLists[i+1].offsetTop){ setNav(i); indexListFixed.innerHTML = indexLists[i].children[0].innerHTML; return; } } setNav(indexLists.length - 1); indexListFixed.innerHTML = indexLists[indexLists.length - 1].children[0].innerHTML; }); function setIndex(y){ let index = getIndex(y); if(index < 0 || index > 9){ return ; } indexList.scrollToElement(indexLists[index],100); } function setNav(index){ indexListNavs.forEach((li)=>{ li.classList.remove("active"); }); indexListNavs[index].classList.add("active"); } function getIndex(y){ let navT = indexListNav.getBoundingClientRect().top; let h = 18; let index = parseInt((y-navT)/18); return index; } </script> </body> </html> |
学习学习
