基于jquery和swiper的一个导航demo，在移动端点击导航不能跳转对应区域（谷
导航左右滚动，跳转切换 /*可能需要下载swiper文件,放同级目录就可以了http://www.swiper.com.cn/download/index.html*/ *{ margin:0; padding:0; font-family: "微软雅黑";}body{ font-size:16px; background-color:#f4f4f4;}li{ list-style:none;}a{ text-decoration:none; -webkit-tap-highlight-color:rgba(255,0,0,0);}.wrap{width:100%;}/*导航滑动*/#topNav { width: 100%; overflow: hidden; font-style:normal; font-variant-ligatures: normal; font-variant-caps: normal; font-variant-numeric: normal; font-weight: normal; font-stretch: normal; font: 0.35rem; line-height: 100%; background: #34026A;}#topNav .swiper-slide { width:20%; text-align:center; padding-left: 1%; padding-right:1%; border-right-style: dotted;}#topNav .swiper-slide a div{ transition:all .3s ease; display:block; color: #fff; width: 100%; height: 100%; padding-top: 10%; padding-bottom: 10%; }#topNav .active a .sport{ transform:scale(1.1); background-image:linear-gradient(to top,#FF8D14,#FFBA34); border-radius: 15px 15px 0 0;}#topNav .active a .mw{ transform:scale(1.1); background-image:linear-gradient(to top,#008754,#00B75A); border-radius: 15px 15px 0 0;}#topNav .active a .bd{ transform:scale(1.1); background-image:linear-gradient(to top,#712EEC,#3497E9); border-radius: 15px 15px 0 0;}#topNav .active a .sp{ transform:scale(1.1); background-image:linear-gradient(to top,#F84387,#F95ACB); border-radius: 15px 15px 0 0;}#topNav .active a .mh{ transform:scale(1.1); background-image:linear-gradient(to top,#BD00E0,#B152F5); border-radius: 15px 15px 0 0;}#topNav .active a .bh{ transform:scale(1.1); background-image:linear-gradient(to top,#FA552F,#FC7E4B); border-radius: 15px 15px 0 0;}/*导航悬浮固定*/.tabFloat{ position:fixed; top:0; left:0; z-index:100;}/*主体内容样式*/#div1{ background: yellow; height: 12.5rem; text-align: center;}#div2{ background: green; height: 12.5rem; text-align: center;}#div3{ background: blue; height: 12.5rem; text-align: center;}#div4{ background: rgb(248,76,161); height: 12.5rem; text-align: center;}#div5{ background: rgb(187,16,228); height: 12.5rem; text-align: center;}#div6{ background: rgb(251,100,57); height: 12.5rem; text-align: center;}@media screen and (max-width:334px){ .swiper-slide a div{ font-size:10px;}} 第一模块
第二模块
第三模块
第四模块
第五模块
第六模块
这是第一块
这是第二块
这是第三块
这是第四块
这是第五块
这是第六块
/*可能需要下载swiper文件,放同级目录就可以了http://www.swiper.com.cn/download/index.html*/ |
免责声明：本内容仅代表回答者见解不代表本站观点，请谨慎对待。
版权声明：作者保留权利，不代表本站立场。
|
|
|
|
|
|
|
|
微信访问
手机APP
