Swiper滑动菜单Demo效果展示,直接复制代码即可
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Swiper demo</title> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> <!-- Link Swiper's CSS --> <link rel="stylesheet" href="../dist/css/swiper.min.css"> <!-- Demo styles --> <style> html, body { position: relative; height: 100%; } body { background: #eee; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #000; margin: 0; padding: 0; } .swiper-container { width: 100%; height: 100%; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* 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; } .menu { min-width: 100px; width: 70%; max-width: 320px; background-color: #2C8DFB; color: #fff; } .content { width: 100%; } .menu-button { position: absolute; top: 0px; left: 0px; padding: 15px; cursor: pointer; -webkit-transition: .3s; transition: .3s; background-color: #2C8DFB; /*margin: 14px; border-radius: 5px;*/ } .menu-button .bar:nth-of-type(1) { margin-top: 0px; } .menu-button .bar:nth-of-type(3) { margin-bottom: 0px; } .bar { position: relative; display: block; width: 50px; height: 5px; margin: 10px auto; background-color: #fff; border-radius: 10px; -webkit-transition: .3s; transition: .3s; } .menu-button:hover .bar:nth-of-type(1) { -webkit-transform: translateY(1.5px) rotate(-4.5deg); -ms-transform: translateY(1.5px) rotate(-4.5deg); transform: translateY(1.5px) rotate(-4.5deg); } .menu-button:hover .bar:nth-of-type(2) { opacity: .9; } .menu-button:hover .bar:nth-of-type(3) { -webkit-transform: translateY(-1.5px) rotate(4.5deg); -ms-transform: translateY(-1.5px) rotate(4.5deg); transform: translateY(-1.5px) rotate(4.5deg); } .cross .bar:nth-of-type(1) { -webkit-transform: translateY(15px) rotate(-45deg); -ms-transform: translateY(15px) rotate(-45deg); transform: translateY(15px) rotate(-45deg); } .cross .bar:nth-of-type(2) { opacity: 0; } .cross .bar:nth-of-type(3) { -webkit-transform: translateY(-15px) rotate(45deg); -ms-transform: translateY(-15px) rotate(45deg); transform: translateY(-15px) rotate(45deg); } .cross:hover .bar:nth-of-type(1) { -webkit-transform: translateY(13.5px) rotate(-40.5deg); -ms-transform: translateY(13.5px) rotate(-40.5deg); transform: translateY(13.5px) rotate(-40.5deg); } .cross:hover .bar:nth-of-type(2) { opacity: .1; } .cross:hover .bar:nth-of-type(3) { -webkit-transform: translateY(-13.5px) rotate(40.5deg); -ms-transform: translateY(-13.5px) rotate(40.5deg); transform: translateY(-13.5px) rotate(40.5deg); } </style> </head> <body> <!-- Swiper --> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide menu">Menu slide</div> <div class="swiper-slide content"> <div class="menu-button"> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> </div> Content slide </div> </div> </div> <!-- Swiper JS --> <script src="../dist/js/swiper.min.js"></script> <!-- Initialize Swiper --> <script> var menuButton = document.querySelector('.menu-button'); var swiper = new Swiper('.swiper-container', { slidesPerView: 'auto', initialSlide: 1, resistanceRatio: 0, slideToClickedSlide: true, on: { init: function () { var slider = this; menuButton.addEventListener('click', function () { if (slider.activeIndex === 0) { slider.slideNext(); } else { slider.slidePrev(); } }, true); }, slideChange: function () { var slider = this; if (slider.activeIndex === 0) { menuButton.classList.add('cross'); } else { menuButton.classList.remove('cross'); } }, } }); </script> </body> </html>
.
相关推荐
swiper各种滑动demo,还有左右滑动中间嵌入上下滑动,代码简介,案例多,种类全,之后在我的博客里,也会有些swiper滑动使用得介绍(加入动画,左右滑动嵌入上下滑动)
微信小程序 swiper菜单 仿美团swiper分类菜单,手指左右滑屏式菜单,可以是多个菜单分类,这种菜单的样式风格在android机中也是很普遍的,操作上来说,和微信屏幕顶部的TabBar页面切换效果很类似,只不过这种是TAB,...
主要介绍了微信小程序swiper实现滑动放大缩小效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
Swiper常用于移动端网站的内容触摸滑动 Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper开源、免费、稳定、使用...
swiper手机端和pc端的插件,对h5的开发很有用,基本的轮播都有,可以按需修改
swiper轮播图demo示例代码
微信小程序 仿美团菜单 swiper分类菜单
Swiper框架做的一个Demo,模仿Swiper框架官网的效果所制作的一个Demo
轮播图demo,一屏显示三张图片,中间图片放大,两边图片缩小效果。技术是基于swiper的轮播图,提供给大家参考。
Swiper-3.0.6.zip 各种demo集合
swiper手机移动端触屏滑动选项卡 Swiper Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile ...
Swiper_触屏滑动全屏3D翻页
很多滑动好用的demo例子,很好用哦。
微信小程序学习demo:视图控件View、ScrollView、Swiper(源代码+截图)微信小程序学习demo:视图控件View、ScrollView、Swiper(源代码+截图)微信小程序学习demo:视图控件View、ScrollView、Swiper(源代码+截图)微信...
vue swiper demo
Swiper-master的Demo
双重横向菜单 多个swiper
基于Vue的移动端可滑动菜单栏
测试csdn小仓库vue-awesome-swiper
swiper圆角卡片式手机触屏滑动图片切换代码,一款基于swiper制作的手机端图片缩放展示效果,除了手指触屏滑动切换方式,还可以点击索引按钮进行切换。