博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
swiper实现菜单滑动效果
阅读量:5874 次
发布时间:2019-06-19

本文共 4229 字,大约阅读时间需要 14 分钟。

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用Swiper制作webapp菜单栏切换</title> <meta name="viewport" content="width=100%; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> <script src="js/jquery.min.js"></script> <!--<script src="//cdn.bootcss.com/Swiper/3.3.1/js/swiper.jquery.min.js"></script>--> <script type="text/javascript" src="js/swiper-3.4.0.jquery.min.js" ></script> <!--<link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/Swiper/3.3.1/css/swiper.min.css">--> <link rel="stylesheet" href="css/swiper-3.2.7.min.css" /> <style> body { min-width: 320px; max-width: 640px; margin: 0 auto; color: #333; padding: 0; font-family: "Microsoft Yahei"; text-align: center; } .container { /*width: 100%;*/ border: 1px solid #ccc; } .swiper1 { width: 100%; } .swiper1 .selected { color: #ec5566; border-bottom: 2px solid #ec5566; } .swiper1 .swiper-slide { text-align: center; font-size: 16px; height: 50px; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; cursor: pointer; } .swiper2 { width: 100%; } .swiper2 .swiper-slide { height: calc(100vh - 50px); background-color: #ccc; color: #fff; text-align: center; box-sizing: border-box !important; overflow-x: hidden !important; } </style> </head> <body> <div class="container"> <div class="swiper-container swiper1"> <div class="swiper-wrapper"> <div class="swiper-slide selected">推荐</div> <div class="swiper-slide">菜单 2</div> <div class="swiper-slide">菜单 3</div> <div class="swiper-slide">菜单 4</div> <div class="swiper-slide">菜单 5</div> <div class="swiper-slide">菜单 6</div> <div class="swiper-slide">菜单 7</div> <div class="swiper-slide">菜单 8</div> <div class="swiper-slide">菜单 9</div> <div class="swiper-slide">菜单 10</div> </div> </div> <!-- swiper2 --> <div class="swiper-container swiper2"> <div class="swiper-wrapper"> <div class="swiper-slide swiper-no-swiping"> <div style="width: 100%;height: 100%;background-color: gainsboro;">上面导航栏可以滑动</div> </div> <div class="swiper-slide swiper-no-swiping">上面导航栏可以滑动2222</div> <div class="swiper-slide swiper-no-swiping">内容 213213123</div> <div class="swiper-slide swiper-no-swiping">内容 ressssssss</div> <div class="swiper-slide swiper-no-swiping">内容 ffffffffffff</div> <div class="swiper-slide swiper-no-swiping">内容 bbbbbbbbbbbbbbbbbvb</div> <div class="swiper-slide swiper-no-swiping">内容 bvcccccccccccbvb</div> <div class="swiper-slide swiper-no-swiping">内容 sdasdssssss</div> <div class="swiper-slide swiper-no-swiping">内容 oiouiouioiuoiuo</div> <div class="swiper-slide swiper-no-swiping">内容 m,jnkjhkhgjghjugh</div> </div> </div> </div> <script> $(function() { function setCurrentSlide(ele, index) { $(".swiper1 .swiper-slide").removeClass("selected"); ele.addClass("selected"); //swiper1.initialSlide=index; } var swiper1 = new Swiper('.swiper1', { // 设置slider容器能够同时显示的slides数量(carousel模式)。 // 可以设置为number或者 'auto'则自动根据slides的宽度来设定数量。 // loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。 slidesPerView: 5.5, paginationClickable: true,//此参数设置为true时,点击分页器的指示点分页器会控制Swiper切换。 spaceBetween: 10,//slide之间的距离(单位px)。 freeMode: true,//默认为false,普通模式:slide滑动时只滑动一格,并自动贴合wrapper,设置为true则变为free模式,slide会根据惯性滑动且不会贴合。 loop: false,//是否可循环 onTab: function(swiper) { var n = swiper1.clickedIndex; } }); swiper1.slides.each(function(index, val) { var ele = $(this); ele.on("click", function() { setCurrentSlide(ele, index); swiper2.slideTo(index, 500, false); //mySwiper.initialSlide=index; }); }); var swiper2 = new Swiper('.swiper2', { //freeModeSticky 设置为true 滑动会自动贴合 direction: 'horizontal',//Slides的滑动方向,可设置水平(horizontal)或垂直(vertical)。 loop: false, // effect : 'fade',//淡入 //effect : 'cube',//方块 //effect : 'coverflow',//3D流 // effect : 'flip',//3D翻转 autoHeight: true,//自动高度。设置为true时,wrapper和container会随着当前slide的高度而发生变化。 onSlideChangeEnd: function(swiper) { //回调函数,swiper从一个slide过渡到另一个slide结束时执行。 var n = swiper.activeIndex; setCurrentSlide($(".swiper1 .swiper-slide").eq(n), n); swiper1.slideTo(n, 500, false); } }); }); </script> </body> </html>

转载地址:http://xvhnx.baihongyu.com/

你可能感兴趣的文章
深入理解JavaScript系列
查看>>
strtol 函数用法
查看>>
eclipse内存溢出设置
查看>>
搭建jenkins环境(linux操作系统)
查看>>
VS 2015 GIT操作使用说明
查看>>
上海办理房产税变更
查看>>
innerHTML与jquery里的html()区别介绍
查看>>
每天一个linux命令(52):scp命令
查看>>
CMOS Sensor Interface(CSI)
查看>>
linq中的contains条件
查看>>
HDU 5590 ZYB's Biology 水题
查看>>
BZOJ1092 : [SCOI2003]蜘蛛难题
查看>>
memcached 分布式聚类算法
查看>>
关于微信开发与微信支付更新
查看>>
浏览器内核比较
查看>>
CSS样式表——超链接样式
查看>>
如何让C#像JavaScript一样编程
查看>>
C++ 复制控制
查看>>
OC -- 第一个类
查看>>
图片文件Exif信息详细说明(转)
查看>>