swiper实现触摸滑动
引入文件的必要性
<link href="css/swiper.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
<script type="text/javascript" src="js/swiper.min.js"></script>
文件下载地址http://www.swiper.com.cn/download/index.html#file7
使用
<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>
<!-- 假设须要分页器 -->
<div
class="swiper-pagination"></div>
<!-- 假设须要导航button -->
<div
class="swiper-button-prev"></div>
<div
class="swiper-button-next"></div>
<!-- 假设须要滚动栏 -->
<div
class="swiper-scrollbar"></div>
</div>
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
// direction: 'vertical', 设置成vertical能够控制屏幕上下滑动,默认的是左右滑动
// speed:1000,
});
</script>
假设页面中使用的有css3动画。要在每次翻页时载入动画。能够将动画写成这样的样式
@keyframes slideInLeft {
0% {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
visibility: visible;
}
100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
这儿加上.swiper-slide-active div
.swiper-slide-active div.slideInLeft {
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
}
很多其它用法查看swiper的官方站点http://www.swiper.com.cn/usage/index.html
的影响,如下面的:
swiper实现触摸滑动的更多相关文章
- 移动端网站的内容触摸滑动-Swiper插件
手机平板等大多移动端站点都会有触摸滑动内容的功能,公司移动端站点(m.muzhiwan.com)的标题广告滑动以及轮播效果就是用的Swiper插件. Swiper就是常用于移动端网站的内容触摸滑动的一 ...
- 移动端触摸滑动插件Swiper
移动端触摸滑动插件Swiper 04/02/2015 一.了解Swiper 目前移动端项目一般都需要具有触屏焦点图的效果,如果你也需要实现这一功能的话,Swiper是一个不错的选择. 1.他不需要加载 ...
- swiper嵌套小demo(移动端触摸滑动插件)
swiper(移动端触摸滑动插件) tip:自己敲得Swiper 的小demo,可以复制粘贴看看效果哦. swiper的js包css包下链接地址 : https://github.com/Clear ...
- 最好的移动触摸滑动插件:Swiper
最近在使用的一个移动触摸滑动插件Swiper,功能很强大,跟之前的那个swipe.JS相比,同时支持在PC端滑动,支持上下方向滑动,支持多张图片滑动,支持多屏滑动,凡是你想得到的几乎都可以实现.最近作 ...
- 移动端触摸滑动插件Swiper使用指南
Swiper是一款开源.免费.功能十分强大的移动端内容触摸滑动插件,目前的最新版本是Swiper4.Swiper主要面向的是手机.平板电脑等移动设备,帮助开发者轻松实现触屏焦点图.触屏Tab切换.触屏 ...
- Swipe JS – 移动WEB页面内容触摸滑动类库
想必做移动前端的同学经常会接到这样子的一个需求,就是在移动设备页面上的banner图能够用手指触摸左右或上下的滑动切换,这在移动设备是个很常见的一个效果,其用户体验远甚于点击一个按钮区域,通过手指的触 ...
- 基于zepto的插件之移动端无缝向上滚动并上下触摸滑动
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 公司的移动端项目是基于zepto的,有一个页面要求文字能够无缝地不停向上滚动,但查了 ...
- android131 360 05 手势触摸滑动,sim卡,开机启动的广播,手机联系人,SharedPreferences,拦截短信
安卓手势触摸滑动: package com.itheima52.mobilesafe.activity; import android.app.Activity; import android.con ...
- 简易实现 TextView单行文本水平触摸滑动效果
为了方便查看,已使用markdown编辑形成新博文. 本文Mardown地址 近期做应用的时候实用到TextView单行长文本,当文本内容过长时候又想实现触摸水平滑动效果. 网上找了非常多,都没有看到 ...
随机推荐
- OutputCache说明
当用户访问该页面,整个页面会server存储在内存中,因此,该页面缓存.当用户再次访问该页面,页面不会再次运行数据操作,页面首先检查server中是否存在缓存.假设缓存存在,则直接从缓存中获取页面信息 ...
- [LeetCode328]Odd Even Linked List
题目: Given a singly linked list, group all odd nodes together followed by the even nodes. Please note ...
- C#中对于float,double,decimal的误解
原文:C#中对于float,double,decimal的误解 一直很奇怪C#的预定义数据类型中为什么加了一个decimal,有float和double不就够了吗?今天来挖一挖. 浮点型 如果我们在代 ...
- 怎样解决No architectures to compile for (ONLY_ACTIVE_ARCH=YES, active arch=x86_64, VALID_ARCHS=i386).
怎样解决No architectures to compile for (ONLY_ACTIVE_ARCH=YES, active arch=x86_64, VALID_ARCHS=i386). 错误 ...
- iOS_67控件外观对照
iOS 7 button无边框,操作栏透明,控制器全屏 Tab Bar 对照 iOS 7 ...
- Oracle 初始化参数文件pfile和spfile
pfile和spfile差额 pfile :Oracle 9i之前.ORACLE使用我们一直PFILE存储的初始化参数,,能够在操作系统级别改动. 当spfile文件改动出现错误导致oracle无法启 ...
- SQL_substr功能测试
原创作品.从 "深蓝blog" 博客,欢迎转载,请务必注明转载的来源.权法律责任. 深蓝的blog:http://blog.csdn.net/huangyanlong/articl ...
- Unity3D-RPG项目实战(1):发动机的特殊文件夹
前言 从8月份開始.下定决心正式開始学习Unit3D啦.尽管自己写过两代端游引擎,被应用的项目也超过10个,Unreal Engine也搞过几年,只是做手游.哥确实还是个新手.Unity3D这个引擎我 ...
- 类似的微博推断客户关系sql声明
类别似新浪微博的关注和共同关心 不知道别人是怎么设计的. 反正我是例如以下设计的 ID USER FRIEND 1 A B 2 B A 3 ...
- redhat6.3已安装was6.1你可以不弹出安装程序
这在为期两天的课程redhat6.3安装was6.1 使用Xmanager打开图形界面.进入/WAS夹,跑./install 它有一个直接跳转,不管是什么反应,起初我以为这个问题的图形界面,搜索了半天 ...