移动web Zepto.js（移动端的JQuery,封装了移动端的touch事件）

最新推荐文章于 2023-02-14 11:43:33 发布

houyanhua1

最新推荐文章于 2023-02-14 11:43:33 发布

阅读量2k

点赞数 1

分类专栏：移动web 文章标签：移动web zepto

本文链接：https://blog.csdn.net/houyanhua1/article/details/79772228

版权

移动web 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1、Zepto.js 是移动端的JQuery的模块化(JQuery太大,模块化的Zepto.js就是使用到哪些功能就导入哪些js文件,不会导入整个JQuery)
2、Zepto.js 根据需要,导入多个不同的模块。

demo.html：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>Document</title>

	<style type="text/css">
		li{
			height: 20px;  /* 改变高度的动画,必须先有个初始值 */
		}
	</style>

	<!-- zepto的基础模块  必须导入的-->
	<script type="text/javascript" src='zepto-master/src/zepto.js'></script>
	
	<!-- 如果使用事件 需要导入event -->
	<script type="text/javascript" src='zepto-master/src/event.js'></script>

	<!-- 导入 animate的模块 -->
	<script type="text/javascript" src='zepto-master/src/fx.js'></script>

	<!-- 移动端事件 需要导入touch.js -->
	<script type="text/javascript" src='zepto-master/src/touch.js'></script>

	<script type="text/javascript">
		$(function () {
			// 为li标签绑定click事件
			// $('li').on('click',function(){
			// 	console.log('123');
			// })
			$('li').click(function(){  // 单击事件
				console.log('捏哈哈');
				$('li').css('backgroundColor',"white");
				$(this).css('backgroundColor','orange');
				$(this).animate({
					height:100
				},2000,'ease');
			}).longTap(function(){   // 移动端 长按事件
				$(this).animate({
					'backgroundColor':'hotpink'
				},500);
			}).swipeLeft(function(){
				$(this).text('感觉自己萌萌哒');
			}).swipeRight(function(){
				$(this).text('想的真好');
			})

			// 移动端双击事件  移动端很少使用双击
			// $('li').doubleTap(function(){
			// 	console.log('我被双击了');
			// })

		})
	</script>
</head>
<body>
	<ul>
		<li>西兰花炒蛋很好吃</li>
		<li>西兰花炒蛋很好吃</li>
		<li>西兰花炒蛋很好吃</li>
		<li>西兰花炒蛋很好吃</li>
	</ul>
</body>
</html>