实现手机左右滑屏效果

最近，在做一个手机端的小软件中，用到了一个左右滑屏的效果，通过一个插件Swiper就可以轻松实现。
Swiper中文网：http://www.swiper.com.cn/demo/index.html
其中，有这个插件的引用文件和各种各样的demo，包括左右滑动、上下滑动、3D方块效果、翻转效果等。

一个简单的demo如下

使用的时候，引入它的CSS和JS文件即可。

<link href="~/Content/JS/swiper.min.css" rel="stylesheet" /><script src="~/Content/JS/swiper.min.js"></script>

HTML代码

<html>
<head><meta charset="utf-8"><title>实验</title><meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"><link href="~/Content/JS/swiper.min.css" rel="stylesheet" /><script src="~/Content/JS/swiper.min.js"></script><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;}</style>
</head>
<body><!-- Swiper --><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide">Slide 1</div><div class="swiper-slide">Slide 2</div><div class="swiper-slide">Slide 3</div><div class="swiper-slide">Slide 4</div><div class="swiper-slide">Slide 5</div><div class="swiper-slide">Slide 6</div><div class="swiper-slide">Slide 7</div><div class="swiper-slide">Slide 8</div><div class="swiper-slide">Slide 9</div><div class="swiper-slide">Slide 10</div></div><!-- Add Pagination --><div class="swiper-pagination"></div></div><!-- Initialize Swiper --><script>var swiper = new Swiper('.swiper-container', {pagination: '.swiper-pagination',paginationClickable: true});</script>
</body>
</html>

实现手机左右滑屏效果相关推荐

QT widget实现手机界面滑屏效果，支持鼠标滑动，触摸屏上滑动
随着智能手机的不断普及,手机屏幕成为人机交互的重要方式.对于主界面的左右翻页效果.Qt如何实现呢? 效果如图: 标题部分代码: void AnimationStackedWidget::render ...
QWidget实现手机ipad屏幕滑屏效果
QWidget实现手机/ipad屏幕滑屏效果通过Qt的QWidget实现手机ipad滑屏效果.最近学习qml时发现,通过qml的swipe组件可以方便实现滑屏效果,目前QWidget依旧是使用重点, ...
[QML开发笔记]-QML滑屏效果
[QML开发笔记]-QML滑屏效果 QML的SwipeView滑屏控件.PageIndicator翻页指示器控件的功能介绍和使用方法.同样的功能我通过QWidget也进行了实现,可以参考QWidget ...
Qt 触屏研究-部分控件实现滑屏效果
上一篇博客是对手势操作的一些研究,这一篇主要是处理在触屏上实现控件类似手机的那种滑动效果.在网上查询资料可知qt有这样的属性. 现在我测试的两个控件是QTableWidget和QTextEdit两个比 ...
android左右滑动fragment,Android基于ViewPager+Fragment实现左右滑屏效果的方法
本文实例讲述了Android基于ViewPager+Fragment实现左右滑屏效果的方法.分享给大家供大家参考,具体如下: 1.xml布局模板 android:id="@+id/local ...
html 滑屏效果,HTML5 web app实现手动页面滑屏效果
现在很流行在H5页面滑屏的效果,特别是在微信浏览器窗口中,几乎很多推广的活动是使用到上下滑屏,一开始和前端的同事一起合作写滑屏效果花费了很多的时间,而且写出来的页面在浏览器的兼容上踩了很多坑,于是果断 ...
android滑屏效果,Android使用ViewFlipper和GestrueDetector共同实现滑屏效果实例
本文实例讲述了Android使用ViewFlipper和GestrueDetector共同实现滑屏效果.分享给大家供大家参考,具体如下: 关于GestureDetector的相关知识,前面已经介绍过了 ...
安卓自动滑屏脚本_手机自动滑屏软件下载-安卓手机自动滑屏(Auto.js)下载v4.1.1 安卓免root版-西西软件下载...
安卓手机自动滑屏软件一款全新功能强大的手机应用脚本,可以更好的实现上下滑屏幕助手,免root屏幕自动滑动,编写软件.游戏脚本等一站式服务功能,需要的朋友快来下载体验吧! 安卓手机自动滑屏是什么软件手 ...
android滑屏设计规范,Android使用ViewFlipper和GestrueDetector共同实现滑屏效果实例
本文实例讲述了Android使用ViewFlipper和GestrueDetector共同实现滑屏效果.分享给大家供大家参考,具体如下: 关于GestureDetector的相关知识,前面已经介绍过了 ...

实现手机左右滑屏效果

一个简单的demo如下

实现手机左右滑屏效果相关推荐

最新文章

热门文章