移动端js事件以及相关库

作者: 凌屿 | 来源:发表于2018-09-24 19:53 被阅读25次

移动端js事件

移动端的操作方式和PC端是不同的，移动端主要用手指操作，所以有特殊的touch事件，touch事件包括如下几个事件：

touchstart: //手指放到屏幕上时触发

touchmove: //手指在屏幕上滑动式触发

touchend: //手指离开屏幕时触发

touchcancel: //系统取消touch事件的时候触发，比较少用

移动端一般有三种操作，点击、滑动、拖动，这三种操作一般是组合使用上面的几个事件来完成的，所有上面的4个事件一般很少单独使用，一般是封装使用来实现这三种操作，可以使用封装成熟的js库。

zeptojs

Zepto是一个轻量级的针对现代高级浏览器的JavaScript库，它与jquery有着类似的api。如果你会用jquery，那么你也会用zepto。Zepto的一些可选功能是专门针对移动端浏览器的；它的最初目标是在移动端提供一个精简的类似jquery的js库。

touch模块封装了针对移动端常用的事件，可使用此模块进行移动端特定效果开发，这些事件有：

tap 元素tap的时候触发，此事件类似click，但是比click快。

longTap 当一个元素被按住超过750ms触发。

swipe, swipeLeft, swipeRight, swipeUp, swipeDown 当元素被划过时触发。(可选择给定的方向)

swiper

swiper.js是一款成熟稳定的应用于PC端和移动端的滑动效果插件，一般用来触屏焦点图、触屏整屏滚动等效果。 swiper分为2.x版本和3.x版本，2.x版本支持低版本浏览器(IE7)，3.x放弃支持低版本浏览器，适合应用在移动端。

swiper使用方法：

<script type="text/javascript" src="js/swiper.min.js"></script>
......

<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
......

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">slider1</div>
    <div class="swiper-slide">slider2</div>
    <div class="swiper-slide">slider3</div>
  </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

<script> 
var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
  prevButton: '.swiper-button-prev',
  nextButton: '.swiper-button-next',
    initialSlide :1,
  paginationClickable: true,
  loop: true,
  autoplay:3000,
  autoplayDisableOnInteraction:false
});
</script>

swiper使用参数：

initialSlide：初始索引值，从0开始

direction：滑动方向 horizontal | vertical

speed：滑动速度，单位ms

autoplay：设置自动播放及播放时间

autoplayDisableOnInteraction：用户操作swipe后是否还自动播放，默认是true，不再自动播放

pagination：分页圆点

paginationClickable：分页圆点是否点击

prevButton：上一页箭头

nextButton：下一页箭头

loop：是否首尾衔接

onSlideChangeEnd：回调函数，滑动结束时执行

bootstrap

简单、直观、强悍的前端开发框架，让web开发更迅速、简单。来自Twitter，是目前很受欢迎的前端框架之一。 Bootrstrap是基于HTML、CSS、JavaScript的，让书写代码更容易。移动优先，响应式布局开发。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
        
    </script>
</head>
<body>
    <div class="container" style="background:gold;">固定宽度的容器</div>
    <br>
    <br>
    <div class="container-fluid" style="background:gold;">流体布局的容器</div>
</body>
</html>

bootstrap 容器

container-fluid 流体

container

1170

970

750

100%

bootstrap 栅格系统

bootstrap将页面横向分为12等分，按照12等分定义了适应不同宽度等分的样式类，这些样式类组成了一套响应式、移动设备优先的流式栅格系统：

col-lg-

col-md-

col-sm-

col-xs-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>栅格系统</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <style type="text/css">
        div[class*='col-']{
            height: 50px;
            border: 1px solid black;
            background-color: gold;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
        
    </script>
</head>
<body>
    <div class="container" style="background: cyan;">
        container样式左右有15px的padding
    </div>
    <div class="container">
        <div class="row">
            <div class="col-lg-3">col-lg-3</div>
            <div class="col-lg-3">col-lg-3</div>
            <div class="col-lg-3">col-lg-3</div>
            <div class="col-lg-3">col-lg-3</div>
        </div>
        <br>
        <br>
        <div class="row">
            <div class="col-md-4">col-md-4</div>
            <div class="col-md-4">col-md-4</div>
            <div class="col-md-4">col-md-4</div>
        </div>
        <br>
        <br>
        <div class="row">
            <div class="col-sm-3">col-sm-3</div>
            <div class="col-sm-6">col-sm-6</div>
            <div class="col-sm-3">col-sm-3</div>
        </div>
        <br>
        <br>
        <div class="row">
            <div class="col-xs-1">col-xs-1</div>
            <div class="col-xs-7">col-xs-7</div>
            <div class="col-xs-4">col-xs-4</div>
        </div>
    </div>
</body>
</html>

bootstrap响应式查询区间：

大于等于768

大于等于992

大于等于1200

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>响应式布局</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <style type="text/css">
        .container{
            background-color: cyan;
        }
        .pic{
            height: 200px;
            max-width: 200px;
            background-color: gold;
            border: 1px solid black;
            margin: 0 auto 20px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
        
    </script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="pic"></div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="pic"></div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="pic"></div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="pic"></div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="pic"></div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="pic"></div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="pic"></div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="pic"></div>
            </div>
        </div>
    </div>
</body>
</html>

bootstrap 表单:

form 声明一个表单域

form-inline 内联表单域

form-horizontal 水平排列表单域

form-group 表单组、包括表单文字和表单控件

form-control 文本输入框、下拉列表控件样式

checkbox checkbox-inline 多选框样式

radio radio-inline 单选框样式

input-group 表单控件组

input-group-addon 表单控件组物件样式 10、input-group-btn 表单控件组物件为按钮的样式

form-group-lg 大尺寸表单

form-group-sm 小尺寸表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <style type="text/css">
        
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
    </script>
</head>
<body>
    <!-- 
    <div class="container">
        <h1>表单</h1>
        <div class="form">
            <div class="form-group">
                <label for="">姓名</label>
                <input type="text" class="form-control" id="" placeholder="姓名">
            </div>
            <div class="form-group">
                <label for="">密码</label>
                <input type="password" class="form-control" id="" placeholder="密码">
            </div>
        </div>
        <br>
        <br>
        <h1>表单</h1>
        <div class="form">
            <div class="form-group">
                <label for="exampleInputEmail1">Email address</label>
                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
              </div>
              <div class="form-group">
                <label for="exampleInputPassword1">Password</label>
                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
              </div>
              <div class="form-group">
                <label for="exampleInputFile">File input</label>
                <input type="file" id="exampleInputFile">
                <p class="help-block">Example block-level help text here.</p>
              </div>
              <div class="checkbox">
                <label>
                  <input type="checkbox"> Check me out
                </label>
              </div>
              <button type="submit" class="btn btn-default">Submit</button>
        </div>
    </div>
    <br>
    <br>
    <div class="container">
        <h1>内联表单域</h1>
        <div class="form-inline">
            <div class="form-group">
                <label for="exampleInputEmail1">Email address</label>
                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
              </div>
              <div class="form-group">
                <label for="exampleInputPassword1">Password</label>
                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
              </div>
              <div class="form-group">
                <label for="exampleInputFile">File input</label>
                <input type="file" id="exampleInputFile">
                <p class="help-block">Example block-level help text here.</p>
              </div>
              <div class="checkbox">
                <label>
                  <input type="checkbox"> Check me out
                </label>
              </div>
              <button type="submit" class="btn btn-default">Submit</button>
        </div>
    </div>
    <br>
    <br>
    <div class="container">
        <h1>水平排列的表单</h1>
        <div class="form-horizontal">
            <div class="form-group">
                <label for="exampleInputEmail1" class="col-xs-2">Email address</label>
                <div class="col-xs-10">
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                </div>
              </div>
        </div>
    </div>
     -->
    <br>
    <br>
    <div class="container">
        <h1>表单控件组</h1>
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
          <span class="input-group-addon" id="basic-addon1">@</span>
        </div>
    </div>
    <br>
    <br>
    <div class="container">
        <h1>按钮表单控件组</h1>
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
          <span class="input-group-btn" id="basic-addon1">
            <button class="btn btn-primary">go</button>
          </span>
        </div>
    </div>
    <br>
    <br>
    <div class="container">
        <h1>字体图标表单控件组</h1>
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
          <span class="input-group-btn" id="basic-addon1">
            <button class="btn btn-primary">
                <span class="glyphicon glyphicon-repeat"></span>
            </button>
          </span>
        </div>
    </div>
</body>
</html>

bootstrap 按钮

btn 声明按钮

btn-default 默认按钮样式

btn-primay

btn-success

btn-info

btn-warning

btn-danger

btn-link

btn-lg

btn-md

btn-xs

btn-block 宽度是父级宽100%的按钮

active

disabled

btn-group 定义按钮组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <style type="text/css">
        
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
    </script>
</head>
<body>
    <div class="container">
        <h1>按钮</h1>
        <button class="btn btn-default btn-lg">button按钮</button>

        <input type="button" class="btn btn-primary btn-sm" value="input按钮">

        <a href="#" class="btn btn-success btn-xs">a标签按钮</a>
        <a href="#" class="btn btn-info">a标签按钮</a>
        <a href="#" class="btn btn-warning">a标签按钮</a>
        <a href="#" class="btn btn-danger">a标签按钮</a>
    </div>
    <br>
    <br>
    <div class="container">
        <button class="btn btn-success btn-block">通栏按钮</button>
    </div>
    <br>
    <br>
    <!-- 按钮组 -->
    <div class="container">
        <div class="btn-group">
            <a href="#" class="btn btn-info">按钮01</a>
            <a href="#" class="btn btn-warning">按钮02</a>
            <a href="#" class="btn btn-danger">按钮03</a>
        </div>
    </div>
    <br>
    <br>
    <!-- 通栏按钮组，用于选项卡切换 -->
    <div class="container">
        <div class="btn-group btn-group-justified">
            <a href="#" class="btn btn-info">按钮01</a>
            <a href="#" class="btn btn-warning" style="margin: 10px;">按钮02</a>
            <a href="#" class="btn btn-danger">按钮03</a>
        </div>
    </div>
    <br>
    <br>
    <!-- 通栏按钮组用input标签做的话，要在每个外面包一层btn-group -->
    <div class="container">
        <div class="btn-group btn-group-justified">
            <div class="btn-group">
                <input type="button" class="btn btn-primary" value="按钮一">
            </div>
            <div class="btn-group">
                <input type="button" class="btn btn-warning" value="按钮二">
            </div>
            <div class="btn-group">
                <input type="button" class="btn btn-danger" value="按钮三">
            </div>
        </div>
    </div>
</body>
</html>

bootstrap 图片

img-responsive 声明响应式图片

bootstrap 隐藏类

hidden-xs

hidden-sm

hidden-md

hidden-lg

bootstrap 字体图标

通过字体代替图标，font文件夹需要和css文件夹在同一目录

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体图标</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <style type="text/css">
        .glyphicon-music{
            color: yellow;
            font-size: 20px;
        }
        .edit{
            color: red;
            font-size: 20px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
    </script>
</head>
<body>
    <div class="container">
        <h1>字体图标</h1>
        <button class="btn btn-primary">
            音乐
            <span class="glyphicon glyphicon-music" aria-hidden="true"></span>
        </button>
        <br>
        <br>
        <p><span class="glyphicon glyphicon-pencil edit" aria-hidden="true"></span>这是一个段落</p>
    </div>
</body>
</html>

bootstrap 下拉菜单

dropdown-toggle

dropdown-menu

bootstrap 选项卡

nav

nav-tabs

nav-pills

tab-content

bootstrap 导航条

navbar 声明导航条

navbar-default 声明默认的导航条样式

navbar-inverse 声明反白的导航条样式

navbar-static-top 去掉导航条的圆角

navbar-fixed-top 固定到顶部的导航条

navbar-fixed-bottom 固定到底部的导航条

navbar-header 申明logo的容器

navbar-brand 针对logo等固定内容的样式

navbar-left 菜单靠左

navbar-right 菜单靠右

nav navbar-nav 定义导航条中的菜单

navbar-form 定义导航条中的表单

navbar-btn 定义导航条中的按钮

navbar-text 定义导航条中的文本

bootstrap 模态框

modal 声明一个模态框

modal-dialog 定义模态框尺寸

modal-lg 定义大尺寸模态框

modal-sm 定义小尺寸模态框

modal-header

modal-body

modal-footer

移动端js事件以及相关库

移动端js事件

zeptojs

swiper

swiper使用方法：

swiper使用参数：

bootstrap

bootstrap 容器

bootstrap 栅格系统

bootstrap响应式查询区间：

bootstrap 表单:

bootstrap 按钮

bootstrap 图片

bootstrap 隐藏类

bootstrap 字体图标

bootstrap 下拉菜单

bootstrap 选项卡

bootstrap 导航条

bootstrap 模态框

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读