zepto框架介绍(了解)
Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api。 如果你会用jquery,那么你也会用zepto。
zepto与jquery的区别
-
jquery针对pc端,主要用于解决浏览器兼容性问题,zepto主要针对移动端。
-
zepto比jquery轻量,文件体积更小
-
zepto封装了一些移动端的手势事件
zepto的基本使用
zepto的使用与jquery基本一致,zepto是分模块的,需要某个功能,就需要引入某个zepto的文件。
<script src="zepto/zepto.js"></script>
<script src="zepto/event.js"></script>
<script src="zepto/fx.js"></script>
<script>
$(function () {
$(".box").addClass("demo");
$("button").on("click", function () {
$(".box").animate({width:500}, 1000);
});
});
</script>
zepto的定制
安装Nodejs环境
1、下载zepto.js
2、解压缩
3、cmd命令行进入解压缩后的目录
4、执行npm install
命令
5、编辑make文件的41行
,添加自定义模块并保存,
7、然后执行命令 npm run-script dist
8、查看目录dist即构建好的zepto.js
zepto手势事件
zepto中根据touchstart touchmove touchend
封装了一些常用的手势事件
tap // 轻触事件,用于替代移动端的click事件,因为click事件在老版本中会有300ms的延迟
//穿透的问题 fastclick:
swipe //手指滑动时触发
swipeLeft //左滑
swipeRight //右滑
swipeUp //上滑
swipeDown //下滑