CSS3移动端插件(zepto,iscroll,swiper,echo)

简介：

1.zepto.js（相当于手机端的jq库，轻量级，有些功能比如ajax，touch要引入额外的js(zepto官网有)）

2.iscroll.js(滚动条)

3.swiper.js&swiper.css(滑动)

4.echo.js(懒加载)

一、zepto（js库）

jQuery.js  ===>pc
zepto.js   ===>移动端 (轻量级)

相同点：
		api几乎差不多一样
不同点：
		1》事件不同
		2》体积大小

******注意:在移动端页面中使用click事件会有300毫秒的延迟
	
click ===>tap
swipeLeft    四个方向的滑屏
swipeRight
swipeUp
swipeDown

二、iscroll.js(滚动条)

IScroll.js插件是兼容所有移动端滚动条事件的插件，在某些安卓机中，我们无法通过overflo:scroll这个css属性来出现滚动条；它也可以非常好的在一个容器元素中处理滚动;

要求:
	1》要给滚动区域加入一个父元素(下面案例的#listIscroll就是这个加入的父元素)
	2》父元素的高度值要小于，滚动区块的高度
	3》new IScroll(".list",{
		
		scrollbars: true 
		是否显示滚动条。默认为false;
		fadeScrollbars:true
		滚动条淡入淡出效果,当然前提是你滚动条显示了。默认为false;
		bounce: false 
		滚动到达容器边界时是否执行反弹动画。默认为true;
		click:true 
		iScroll禁止默认鼠标的点击行为，如果要使用设置true;默认为false;

	});
案例：
 <div id="list" class="list">  <!--new IScroll加给list-->
	<div  id="listIscroll">	<!--“要给滚动区域加入一个父元素，高度小于滚动区域”-->
	 	<a href="">
   			<p>内容1</p>
   	 	</a>
   	 	<a href="">
   			<p>内容2</p>
   	 	</a>
   	 	<a href="">
   			<p>内容3</p>
   	 	</a>
	</div>
</div>

三、swiper（滑动）

官网：https://www.swiper.com.cn/

使用：

	1》获取到swiper.js、swiper.css
	2》先把dom元素赋值
	3》new Swiper
	4》设置功能（参数）

		{
			loop:true  ==>循环
			autoplay   ==>自动播放
		}

四、图片懒加载（预加载） echo.js
未出现在屏幕上的图片暂时不加载
使用:
1>引入echo.js
2>在dom节点图片上加入

		data-echo='要加载的图片路径'

	3>echo.init()