zepto中的动画+Ajax+touch模块+zepto插件
程序员文章站
2023-12-29 23:45:58
zepto中的动画 zepto中不具备动画模块，需要单独引入 fx.js 和 fx_methods.js https://github.com/madrobby/zepto toggle 元素显示与隐藏
zepto中的动画
zepto中不具备动画模块，需要单独引入 fx.js 和 fx_methods.js
toggle 元素显示与隐藏
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>zepto</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<style>
</style>
</head>
<body>
<div>box</div>
<button id="btn">点我</button>
<script src="js/zepto.min.js"></script>
<script src="js/fx.js"></script><!-- 动画模块 -->
<script src="js/fx_methods.js"></script>
<script>
$("#btn").click(function(){
$("div").toggle();
$("div").toggle("slow");
$("div").toggle(3000);
})
</script>
</body>
</html>
show 显示 hide 隐藏
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>zepto</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<style>
</style>
</head>
<body>
<div>box</div>
<button id="btn">点我</button>
<script src="js/zepto.min.js"></script>
<script src="js/fx.js"></script><!-- 动画模块 -->
<script src="js/fx_methods.js"></script>
<script>
$("#btn").click(function(){
$("div").hide();
$("div").hide("slow");
$("div").hide(3000);
$("div").show();
$("div").show("slow");
$("div").show(3000);
})
</script>
</body>
</html>
fadein 淡入 fadeout 淡出 fadetoggle 切换淡入与淡出
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>zepto</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<style>
</style>
</head>
<body>
<div>box</div>
<span>span</span>
<button id="btn">点我</button>
<script src="js/zepto.min.js"></script>
<script src="js/fx.js"></script><!-- 动画模块 -->
<script src="js/fx_methods.js"></script>
<script>
$("#btn").click(function(){
$("div").fadein();
$("div").fadein("slow");
$("div").fadein("fast");
$("div").fadein(3000);
$("div").fadeout();
$("div").fadeout("slow");
$("div").fadeout("fast");
$("div").fadeout(3000);
$("div").fadetoggle();
$("div").fadetoggle("slow");
$("div").fadetoggle("fast");
$("div").fadetoggle(3000);
//控制多个元素
$("div,span").fadetoggle();
$("div,span").fadetoggle("slow");
$("div,span").fadetoggle("fast");
$("div,span").fadetoggle(3000);
})
</script>
</body>
</html>
fadeto 切换透明度
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>zepto</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<style>
</style>
</head>
<body>
<div>box</div>
<button id="btn">点我</button>
<script src="js/zepto.min.js"></script>
<script src="js/fx.js"></script><!-- 动画模块 -->
<script src="js/fx_methods.js"></script>
<script>
$("#btn").click(function(){
$("div").fadeto("slow",.3);
$("div").fadeto("fast",.3);
$("div").fadeto(3000,.3);
})
</script>
</body>
</html>
animate动画：
对元素的属性进行动画
参数分别是：动画的属性、动画持续时间、动画完成后的回调
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>zepto</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<style>
#div{width:50px;height:50px;background:pink;position:absolute;top:0;left:0;}
#btn{position: absolute;top:50px;left:0;}
</style>
</head>
<body>
<div id="div"></div>
<button id="btn">点我</button>
<script src="js/zepto.min.js"></script>
<script src="js/fx.js"></script><!-- 动画模块 -->
<script src="js/fx_methods.js"></script>
<script>
$("#btn").click(function(){
$("#div").animate({"left":300},3000,function(){
alert("finished");
})
})
</script>
</body>
</html>
多属性动画：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>zepto</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<style>
#div{width:50px;height:50px;background:pink;position:absolute;top:0;left:0;}
#btn{position: absolute;top:50px;left:0;}
</style>
</head>
<body>
<div id="div"></div>
<button id="btn">点我</button>
<script src="js/zepto.min.js"></script>
<script src="js/fx.js"></script><!-- 动画模块 -->
<script src="js/fx_methods.js"></script>
<script>
$("#btn").click(function(){
$("#div").animate({"left":300,"top":300},3000,function(){
alert("finished");
})
})
</script>
</body>
</html>
多属性不同时进行动画，而是执行完一个属性再执行另一个
将第二个动画写在第一个的回调里
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>zepto</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<style>
#div{width:50px;height:50px;background:pink;position:absolute;top:0;left:0;}
#btn{position: absolute;top:50px;left:0;}
</style>
</head>
<body>
<div id="div"></div>
<button id="btn">点我</button>
<script src="js/zepto.min.js"></script>
<script src="js/fx.js"></script><!-- 动画模块 -->
<script src="js/fx_methods.js"></script>
<script>
$("#btn").click(function(){
$("#div").animate({"left":300},3000,function(){
$(this).animate({"top":300},3000,function(){
alert("finished");
})
})
})
</script>
</body>
</html>
zepto中的ajax：
get post ajax
get 和 post 属于 ajax 的一种简写方式
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>zepto</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<style>
#div{width:50px;height:50px;background:pink;position:absolute;top:0;left:0;}
#btn{position: absolute;top:50px;left:0;}
</style>
</head>
<body>
<div id="div"></div>
<button id="btn">点我</button>
<script src="js/zepto.min.js"></script>
<script>
//原生ajax请求
function ajax(){
var xmlhttpreq=null;
if(window.activexobject){
//ie5,6
xmlhttpreq=new activexobject("microsoft.xmlhttp");
}else{
xmlhttpreq=new xmlhttprequest();
}
xmlhttpreq.open("get","test.php",true);
xmlhttpreq.onreadystatechange=function(){
if(xmlhttpreq.readystate==4){//请求完毕
if(xmlhttpreq.status==200){//获取到数据
console.log("获取数据："+xmlhttpreq.responsetext);
}
}
}
xmlhttpreq.send(null);
}
//zepto ajax
//get 参数分别是：1、url 2、传递给后端的参数 3、接收到数据的处理 4、预期接收到的数据的类型
$.get("test.php",[data],function(res){
$(document.body).append(res);
},[datatype]);
//post 参数与get相同（参数2和4不是必须，参数4一般并不需要填写）
$.post("test.php",{id:5},function(res){
$(document.body).append(res);
},"json");
//ajax
$.ajax({
type:"get",
url:"test.php",
data:{id:5},
datatype:"json",
success:function(res){
console.log(res);
},
error:function(){
console.log("error");
}
})
</script>
</body>
</html>
zepto中的touch模块：
找到touch.js，下载下来
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>zepto</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<style>
#div{width:50px;height:50px;background:#cce;position:absolute;top:0;left:0;}
#btn{position: absolute;top:50px;left:0;}
</style>
</head>
<body>
<div id="div"></div>
<script src="js/zepto.min.js"></script>
<script src="js/touch.js"></script>
<script>
//阻止默认行为
$("#div").on("touchmove",function(e){ e.preventdefault();})
//各种touch事件
$("#div").tap(function(){
console.log("tap");//点击
}).singletap(function(){
console.log("singletap");//单击
}).longtap(function(){
console.log("longtap");//长按
}).doubletap(function(){
console.log("doubletap");//双击
}).swipe(function(){
console.log("swipe");//快速划动
}).swipeleft(function(){
console.log("swipeleft");//快速右划
}).swiperight(function(){
console.log("swiperight");//快速左划
}).swipeup(function(){
console.log("swipeup");//快速上划
}).swipedown(function(){
console.log("swipedown");//快速下划
});
</script>
</body>
</html>
zepto插件：
单插件：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>zepto</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<style>
#div{width:100px;height:100px;background:#cce;position:absolute;top:0;left:0;}
#btn{position: absolute;top:50px;left:0;}
</style>
</head>
<body>
<div id="div">我是div</div>
<script src="js/zepto.min.js"></script>
<script src="js/zepto.fullpage.js"></script>
<script>
//插件的写法
;(function($){
$.fn.myfn=function(options){
//对象合并，相同属性后面的覆盖前面的
var options=$.extend({
//设置默认值
"color":"orange",
"fontsize":"14px"
},options);
this.css({"color":options.color,"fontsize":options.fontsize});
return this;//方便链式调用
}
})(zepto);
//使用插件
$("#div").myfn({
fontsize:"20px"
}).html("可以链式调用啦");
</script>
</body>
</html>
一组插件：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>zepto</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<style>
#div{width:100px;height:100px;background:#cce;position:absolute;top:0;left:0;}
#btn{position: absolute;top:50px;left:0;}
</style>
</head>
<body>
<div id="div">我是div</div>
<script src="js/zepto.min.js"></script>
<script src="js/zepto.fullpage.js"></script>
<script>
//插件的写法
;(function($){
//一组插件
$.extend($.fn,{
myfn:function(options){
var options=$.extend({
//设置默认值
"color":"orange",
"fontsize":"14px"
},options);
this.css({"color":options.color,"fontsize":options.fontsize});
return this;//方便链式调用
},
myfn2:function(options){
var options=$.extend({
"backgroundcolor":"lightgreen"
},options);
this.css({"backgroundcolor":options.backgroundcolor});
return this;
}
});
})(zepto);
//使用插件
$("#div").myfn({
fontsize:"20px"
}).myfn2();
</script>
</body>
</html>
将插件独立出去，使用时再引入
myfn.js
//插件的写法
;(function($){
//一组插件
$.extend($.fn,{
myfn:function(options){
var options=$.extend({
//设置默认值
"color":"orange",
"fontsize":"14px"
},options);
this.css({"color":options.color,"fontsize":options.fontsize});
return this;//方便链式调用
},
myfn2:function(options){
var options=$.extend({
"backgroundcolor":"lightgreen"
},options);
this.css({"backgroundcolor":options.backgroundcolor});
return this;
}
});
})(zepto);
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>zepto</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<style>
#div{width:100px;height:100px;background:#cce;position:absolute;top:0;left:0;}
#btn{position: absolute;top:50px;left:0;}
</style>
</head>
<body>
<div id="div">我是div</div>
<script src="js/zepto.min.js"></script>
<script src="js/myfn.js"></script><!-- 引入插件 -->
<script>
//使用插件
$("#div").myfn({
fontsize:"20px"
}).myfn2({
backgroundcolor:"lightblue"
});
</script>
</body>
</html>
jquery和zepto的区别：
zepto是jquery的精简版，主要针对移动端（因此不会去兼容ie）
部分api实现方式不同
区别1：添加id时，jquery不会生效，而zepto会生效
jquery
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>zepto</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<style>
#div{width:100px;height:100px;background:#cce;position:absolute;top:0;left:0;}
#btn{position: absolute;top:50px;left:0;}
</style>
</head>
<body>
<div class="div">div</div>
<div class="hide">hide</div>
<script src="js/jquery.min.js"></script>
<!-- <script src="js/zepto.min.js"></script> -->
<script>
$(function(){
//区别1：添加id时，jquery不会生效，而zepto会生效
var $new=$("<div>new</div>",{
id:"new"
});
$new.appendto($("body"));
//区别2：offset()
//
//区别3：zepto无法获取隐藏的元素的宽高，而jquery可以
});
</script>
</body>
</html>
zepto
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>zepto</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<style>
#div{width:100px;height:100px;background:#cce;position:absolute;top:0;left:0;}
#btn{position: absolute;top:50px;left:0;}
</style>
</head>
<body>
<div class="div">div</div>
<div class="hide">hide</div>
<script src="js/zepto.min.js"></script>
<script>
$(function(){
//区别1：添加id时，jquery不会生效，而zepto会生效
var $new=$("<div>new</div>",{
id:"new"
});
$new.appendto($("body"));
});
</script>
</body>
</html>
区别2：
区别2：offset()输出元素的定位
jquery返回元素的top和left
zepto返回元素的top、left、width、height
jquery
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>zepto</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<style>
div{width:100px;height:100px;background:#cce;margin-bottom:20px;}
</style>
</head>
<body>
<div class="div">div</div>
<div class="hide">hide</div>
<script src="js/jquery.min.js"></script>
<!-- <script src="js/zepto.min.js"></script> -->
<script>
$(function(){
//区别2：offset()输出元素的定位
//jquery返回元素的top和left
//zepto返回元素的top、left、width、height
console.log($("div").offset());
});
</script>
</body>
</html>
zepto
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>zepto</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<style>
div{width:100px;height:100px;background:#cce;margin-bottom:20px;}
</style>
</head>
<body>
<div class="div">div</div>
<div class="hide">hide</div>
<!-- <script src="js/jquery.min.js"></script> -->
<script src="js/zepto.min.js"></script>
<script>
$(function(){
//区别2：offset()输出元素的定位
//jquery返回元素的top和left
//zepto返回元素的top、left、width、height
console.log($("div").offset());
//区别3：zepto无法获取隐藏的元素的宽高，而jquery可以
});
</script>
</body>
</html>
区别3：添加id时，jquery不会生效，而zepto会生效
jquery
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>zepto</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<style>
div{width:100px;height:100px;background:#cce;margin-bottom:20px;}
.hide{display: none;}
</style>
</head>
<body>
<div class="div">div</div>
<div class="hide">hide</div>
<script src="js/jquery.min.js"></script>
<!-- <script src="js/zepto.min.js"></script> -->
<script>
$(function(){
//区别3：zepto无法获取隐藏的元素的宽高，而jquery可以
console.log($(".hide").width());
});
</script>
</body>
</html>
zepto
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>zepto</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<style>
div{width:100px;height:100px;background:#cce;margin-bottom:20px;}
.hide{display: none;}
</style>
</head>
<body>
<div class="div">div</div>
<div class="hide">hide</div>
<!-- <script src="js/jquery.min.js"></script> -->
<script src="js/zepto.min.js"></script>
<script>
$(function(){
//区别3：zepto无法获取隐藏的元素的宽高，而jquery可以
console.log($(".hide").width());
});
</script>
</body>
</html>