jquery+swiper实现移动手机端滑动式导航效果代码
代码语言:html
所属分类:菜单导航
代码描述:jquery+swiper实现移动手机端滑动式导航效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script> var bw = (document.documentElement.clientWidth / 7.5) + "px"; var htmlTag = document.getElementsByTagName("html")[0]; htmlTag.style.fontSize = bw; </script> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/swiper.min.css"> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-size: 16px; } html { color: #000000; width: 100%; } body { background: #FFFFFF; -webkit-overflow-scrolling: touch; overflow: auto; } html, body { position: relative; height: 100%; } a { text-decoration: none; } header { position: fixed; top: 0; width: 100%; z-index: 8; max-width: 675px; margin: 0 auto; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); } .clearfix:after { content: " "; display: block; clear: both } .title { color: #000; text-align: center; font-size: 20px; border-bottom: 1px solid #eee; line-height: 60px; } .mui-bar { position: fixed; z-index: 10; right: 0; left: 0; border-bottom: 0; } .nav { position: relative; background-color: #f4f5f6; height: 40px; } .nav-list { overflow: hidden; overflow-x: scroll; white-space: nowrap; display: flex; height: 40px; align-items: center; } .nav-a { color: #505050; text-decoration: none; font-size: 16px; margin: 0px; padding: 0 10px; line-height: 28px; display: inline-block; width: auto !important; height: 100%; overflow: hidden; position: relative; text-align: center; } .selected { font-weight: bold; color: #f85959; } .selected .underLine { width: 15px; height: 1px; background: #FFF; bottom: 0px; left: 0px; right: 0px; margin: auto; } #nav .bar .color { width: 15px; margin: 0 auto; height: 1px; background: #f85959; } #nav .bar { width: 50px; height: 3px; position: absolute; bottom: 6px; } .nav-a span { line-height: 40px; } ::-webkit-scrollbar { width: 0px; height: 0px; } </style> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> </head> <body> <div id="top"> <div class="swiper-container nav" id="nav"> <div class="swiper-wrapper nav-list"> </div> </div> </div> <p style="text-align: center;line-height: 100px"> 请在移动端查看效果,支持拖动滑动 </p> <script> (function() { //动态获取导航数据 // get_menu() function get_menu() { $.ajax({ type: 'get', url: '导航请求接口', dataType: 'json', data: {}, success: function (data) { var str = ''; if (data.error_code == 0) { $.each(data.data, function (k, v) { v.cate_name = v.name.substring(0, 2); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0