https://github.com/donglegend/mySwiper

mySwiper

移动端全屏滑动的小插件,简单,轻便,好用,只有3k

下载

  • 直接下载
  • bower install mySwiper

预览

预览demo

使用

支持amd和cmd规范

直接引入

<link rel="stylesheet" type="text/css" href="dist/swiper.css">
<script type="text/javascript" src="dist/swiper.js"></script>
<script type="text/javascript">
var mySwiper = new Swiper(ops);
</script>

require.js 和 sea.js 引入

node环境引入

var Swiper = require("dist/swiper");
var mySwiper = new Swiper();

参数

stage: ".stage", //容器,默认类名  .stage
page: ".page", //单页面, 默认类名 .page
direction: "vertical", //方向 vertical(默认), horizontal
activeClass: "active",
threshold: 50, // 翻页阈值,滑动的最小距离
duration: 300, // 页面过度 时间
elastic: 3 //弹性大小,值越大,滑动越不容易

移动端全屏滑动的小插件,简单,轻便,好用,只有3k swiper,myswiper,page,stage的更多相关文章

  1. iOS开发——实用技术OC篇&8行代码教你搞定导航控制器全屏滑动返回效果

    8行代码教你搞定导航控制器全屏滑动返回效果 前言 如果自定了导航控制器的自控制器的leftBarButtonItem,可能会引发边缘滑动pop效果的失灵,是由于 self.interactivePop ...

  2. iOS - 全屏滑动

    取经地址 1.使用关联 关联是指把两个对象相互关联起来,使得其中的一个对象作为另一个对象的一部分. 使用关联,是基于关键字的,因此,我们可以为任意对象增加任意多的关联,但是关键字是唯一的.关联可以保证 ...

  3. JS案例之5——移动端触屏滑动

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  4. UINavigationController实现全屏滑动返回功能

    说明: UINavigationController默认在push出的控制器中都有边沿滑动返回功能,但是只能从屏幕左边滑才能返回,若从屏幕中间画并没有效果.下面实现全屏滑动功能. 探究: 系统默认能够 ...

  5. 移动端触屏滑动,JS事件

    先了解下 移动端的触屏滑动 毕竟这玩意其实和PC端还是有一定的区别的 hh 整理了下网上的资料放一放 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等 ...

  6. 手机触屏滑动图片切换插件swiper.js

    今天给大家分享一款手机触屏滑动图片切换插件swiper.js是一款swiper手机触屏滑动图片幻灯片,适合各种尺寸.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  7. Android 高大上的侧滑菜单DrawerLayout,解决了不能全屏滑动的问题

    DrawerLayout预览 DrawerLayout主要功能就是 实现侧滑菜单效果的功能,并且可以通过增加一些设置来实现高大上的效果,那么就请看动态图:   注意左上角那个图标,有木有很好玩,哈哈. ...

  8. uni-app仿抖音APP短视频+直播+聊天实例|uniapp全屏滑动小视频+直播

    基于uniapp+uView-ui跨端H5+小程序+APP短视频|直播项目uni-ttLive. uni-ttLive一款全新基于uni-app技术开发的仿制抖音/快手短视频直播项目.支持全屏丝滑般上 ...

  9. macbook air扩展显示器全屏滑动怎样不一起滑动?

    macbook air 外接了一个显示器(扩展),当我有多个桌面时,用手指滑动触控板切换桌面时,扩展屏幕也跟着切换桌面有什么办法能让我在切换主屏幕桌面的时候,扩展屏幕保持不动呢?上周还好好的,昨晚关机 ...

随机推荐

  1. POJ1426 Find The Multiple (宽搜思想)

    Find The Multiple Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 24768   Accepted: 102 ...

  2. POJ1050To the Max(求最大子矩阵)

    题目链接 题意:给出N*N的矩阵,求一个子矩阵使得子矩阵中元素和最大 分析: 必备知识:求一组数的最大连续和 int a[N]; ,maxn = -INF; ; i <= n; i++) { i ...

  3. webstorm9.3 安装less 编译css教程

    第一步:安装node.js webstrom9.3汉化下载:http://pan.baidu.com/s/1ntGNNiL    密码:1fbh node.js 下载地址:https://nodejs ...

  4. IEquatable 的Equals 代替 object 的Equals

    struct Point2 : IEquatable<Point2> { public int X { get; set; } public int Y { get; set; } pub ...

  5. C#------EntityFramework实体加载数据库SQLServer(MySQL)

    一.SQLServer数据库创建表Company,包含ID,CName,IsEnabled三列 二.(1)VS新建一个DXApplication工程,名为CompanyManageSystem (2) ...

  6. Win7 配置Apache+PHP+Mysql环境

    第一.安装并配置APACHE(安装到D:\phpapache\Apache2.2) 1.安装时默认安装,Network Domain, Server Name 我填写我的计算机名,Administra ...

  7. eclipse里怎么用命令行输入args

    eclipse中给java应用传args参数的方法如下:1.先写好Java代码,比如文件名为IntArrqy.java:2.在工具栏或菜单上点run as下边有个Run Configuration:3 ...

  8. HTML学习笔记——块级标签、行级标签、图片标签

    1>块级标签.行级标签 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  9. perspective属性

    1. 目前只有safari和chrome浏览器支持 -webkit-perspective. 2. 单位为像素 { -webkit-perspective:500 } 该属性只影响子元素的的透视效果.

  10. Google 谷歌网页搜索, 学术搜索

    Google 谷歌网页搜索, 学术搜索 1. 网页搜索引擎-Google * https://letsgg.tk/ * https://google.kfd.me/ 谷歌搜索镜像:  http://d ...