zepto.js学习笔记02
2024-04-18 21:45:28
3、touch Event
1、同jquery类似事件.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>同jquery类似事件</title><style type="text/css">.btn2{width: 100px;height: 100px;background: #f0f;}</style>
</head>
<body><!--on() 绑定事件处理程序off() 方法移除用目标oon绑定的事件处理程序。bind() 为每个匹配元素的特定事件绑定事件处理函数，可同时绑定多个事件，也可以自定义事件。one() 为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。只执行一次。trigger() 触发有bind定义的事件（通常是自定义事件）unbind() bind的反向操作，删除匹配元素所绑定的bind事件。--><button id="btn1">按钮1</button><div class="btn2">按钮2</div><button id="btn3">按钮3</button><script src="../js/zepto.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/touch.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">$(function(){$('#btn1').on('touchstart',function(){alert('我是btn1');});
// $('#btn1').off('click');//bind$('.btn2').bind('touchstart touchmove',function(){$(this).toggleClass("btnSty")});//one$('#btn3').one('click',function(){alert('我是btn3')});//trigger 自动执行$('#btn1').bind('myTouch',function(event,a,b){alert('我是由trigger触发的btn');console.log(a + ' ' + b);});$('#btn1').trigger('myTouch',['hello','world']);//unbind$('#btn2').unbind('touchmove');})
</script>
</body>
</html>
2、zepto.html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>zepto_touch</title><style type="text/css">*{touch-action: none;}.box{width: 100px;height: 100px;background: #FFFF00;margin: 0 auto;text-align: center;line-height: 100px;}.btn{width: 100px;height: 50px;background: #FF0000;border-radius: 10px;margin: 0 auto;}</style>
</head>
<body style="height: 1000px;"><!--* zepto touch方法* tap()点击事件 利用在document上绑定touch事件来模拟tap事件的，并且tap事件会冒泡到document上* singleTap() 点击事件* doubleTap() 双击事件* longTap() 当一个元素被按住超过750ms触发。* swipe, swipeLeft, swipeRight, swipeUp, swipeDown — 当元素被划过(同一个方向滑动距离大于30px)时触发。(可选择给定的方向)在一个方向滑动大于30px即为滑动。否则算点击。--><div id="box" class="box">按钮1</div><br /><div id="box2" class="box">按钮2</div><br /><div id="box3" class="box">按钮3</div><button id="btn" class="btn">button</button><script src="../js/zepto.js" type="text/javascript" charset="utf-8"></script><script src="../js/touch.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function () {//tap()点击事件---真机测没问题// $('#box').tap(function () {// alert('tap事件');
// });$('#box').on('tap',function () {alert('tap事件');});//singleTap()单击事件$('#box2').singleTap(function () {alert('我单击了一下');});//doubleTap() 双击事件$('#box2').doubleTap(function () {alert('我双击了一下');});//longTap()长按事件----按住屏幕时间超过750ms触发$('#box3').longTap(function () {alert('我长按了一下box3');});//swipe()滑动事件---在同一个方向连续滑动超过30px// $('#btn').swipe(function () {// alert('我滑动了超过30px');
// });$('#btn').swipeLeft(function () {alert('我向左滑动了');});});</script>
</body>
</html>4、Event
事件处理机制.html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>Event</title><style type="text/css">.btn{width: 200px;height: 200px;background: #ff0;}</style>
</head>
<body><div id="box" class="btn">Event</div><div id="box1"><p>1111</p><p>2222</p><p>3333</p></div><div id="box2" class="btn"></div><script src="../js/zepto.js" type="text/javascript" charset="utf-8"></script><script src="../js/touch.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/** zepto有自己的一套事件机制，并且对不同的浏览器做了兼容的内部封装处理。* 1、像新版本的zepto中已经舍弃了bind，delegate，die，同样jquery中舍弃了live，die等。* 2、现在统一使用on，off标准事件来绑定事件。*/$(function(){//简单绑定$('#box').on('touchstart',function(){alert('ddd');});//事件委托$('#box1').on('touchstart','p',function(){alert($(this).text());});//解除绑定事件//$('#box').off('touchstart');//一次函数$('#box2').one('touchstart',function(){alert('我就执行一次');});})
</script>
</body>
</html>5、form
form.html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title></title>
</head>
<body>
<!--1、serialize()* 在Ajax post请求中将用作提交的表单元素的值编译成 URL-encoded 字符串。---key(name)/value2、serializeArray()* 将用作提交的表单元素的值编译成拥有name和value对象组成的数组。* 不能使用的表单元素，buttons，未选中的radio buttons/checkboxs 将会被跳过。3、submit()* 为 "submit" 事件绑定一个处理函数，或者触发元素上的 "submit" 事件。* 当参数function没有给出时，触发当前表单“submit”事件，并且执行默认的提交表单行为，除非阻止默认行为。
-->
<form><input type="password" name="pw" value="123"/><input type="text" name="val" value="kobe"/><input type="checkbox" checked="checked" name="rember"/><input type="submit" value="按钮" name="anniu"/>
</form>
<script src="../js/zepto.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/touch.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">$(function(){//serialize()var list = $('form').serialize();console.log(list);//serializeArray()var listArr = $('form').serializeArray();console.log(listArr);//submit()$('form').submit(function(e){e.preventDefault();var data = $(this).serialize();console.log(data);})})
</script>
</body>
</html>6、ajax
案例剖析.html
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>ajax容易忽视的重点</title><style type="text/css">#btn{width: 200px;height: 200px;background: red;border-radius: 20px;text-align: center;line-height: 200px;font-size: 30px;}</style></head>
<body><!--* 如何废除一个ajax请求 ----abort()方法需求：点击获取验证码的按钮，用户十秒时候可以再次获取，当十秒过后第一次请求没有返回，用户再次点击获取然后因为网速好或者其他原因，两次请求同时返回，该怎么解决* disabled属性 设置表单项或者按钮不可再点击或者操作；但是只是针对click事件，而并没有针对touch事件作出处理。--><button id="btn">按钮</button><script src="../js/zepto.js" type="text/javascript" charset="utf-8"></script><script src="../js/touch.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function () {var xmlHttp = null;//初始化xmlHttp对象var isSend = false;//初始化判断按钮是否可以点击$('#btn').on('touchstart', function () {if(isSend === true){//如果不能点击，直接返回return;}$(this).css('background', 'gray');isSend = true;//修改为不能点击if(xmlHttp === null){//如果用户首次点击，发送请求xmlHttp = sendXmlHttp();}else{xmlHttp.abort();//再次点击的时候取消上一次请求xmlHttp = sendXmlHttp();//再次发送最新的请求}setTimeout(function () {$('#btn').css('background', 'red');isSend = false;//2s以后用户可以再次点击}, 2000);});//发送ajax请求的函数;function sendXmlHttp() {var xmlHttp = null;xmlHttp = $.ajax({type : 'GET',url : 'http://localhost:3000/',dataType : 'json',success : function (msg) {console.log(msg);},error : function (error) {console.log(error);}});return xmlHttp;}});</script>
</body>
</html>实战练习
index.css
body{width: 100%;height:100%;
}*{touch-action: none;
}#container{width:100%;height: 100%;position: absolute;
}/*定义每个div的宽高及定位！！不能使用relative因为父元素高度没有办法被脱离文档流的子元素撑开*/
.page{width: 100%;height: 100%;position: absolute;
}.hide{display: none;
}.page-current{z-index: 2;
}.common_img{height: auto;width: 25px;position: absolute;top: 92%;left: 50%;margin-left:-12px;
}.page-1-1{background: #083846;}
.page-2-1{background: #9261BF;}
.page-2-2{background: #9261BF;}
.page-3-1{background: #F3533C;}
.page-3-2{ background-color:#F3533C;}
.page-4-1{ background-color:#FFBF50;}
.page-4-2{ background-color:#FFBF50;}
.page-5-1{ background-color:#083846;}.page-1-1 .img_1{height: auto;width: 248px;position: absolute;top: 1%;left: 50%;margin-left: -124px;
}.page-1-1 .img_2{height: auto;width: 185px;position: absolute;top:62%;left: 50%;margin-left: -92px;
}.page-1-1 .img_2{height: auto;width: 185px;position: absolute;top:62%;left: 50%;margin-left: -92px;
}.page-2-1 .img_1{height: auto;width: 158px;position: absolute;top: 2%;left: 50%;margin-left:-79px ;z-index:2;
}.page-2-1 .img_2{height: auto;width: 240px;position: absolute;top: 28%;left: 50%;margin-left:-120px ;
}.page-2-1 .img_3{height: auto;width: 241px;position: absolute;top: 36%;left: 50%;margin-left:-120px ;
}.page-2-1 .img_4{height: auto;width: 20px;position: absolute;top: 87%;left: 50%;margin-left:-10px ;
}.page-2-1 .img_5{height: auto;width: 142px;position: absolute;top: 82%;left: 50%;margin-left:-71px ;
}.page-2-1 .img_7{height: auto;width: 248px;position: absolute;top: 8%;left: 50%;margin-left:-124px ;
}.page-2-2 .img_1 {height:auto;width:293px;position:absolute;left:50%;top:5%;margin-left:-146px;
}
.page-2-2 .img_2 {height:auto;width:260px;position:absolute;left:50%;top:75%;margin-left:-130px;
}
.page-2-2 .img_3 {height:auto;width:20px;position:absolute;left:50%;top:87%;margin-left:-10px;
}
.page-2-2 .img_6 {height:auto;width:25px;position:absolute;left:50%;top:92%;margin-left:-12px;
}.page-3-1 .img_1 {height:auto;width:166px;position:absolute;left:50%;top:2%;margin-left:-86px;z-index:2;
}
.page-3-1 .img_2 {height:auto;width:250px;position:absolute;left:50%;top:30%;margin-left:-125px;
}
.page-3-1 .img_3 {height:auto;width:172px;position:absolute;left:50%;top:28%;margin-left:-55px;
}
.page-3-1 .img_4 {height:auto;width:20px;position:absolute;left:50%;top:87%;margin-left:-10px;
}
.page-3-1 .img_5 {height:auto;width:142px;position:absolute;left:50%;top:82%;margin-left:-71px;
}
.page-3-1 .img_6 {height:auto;width:25px;position:absolute;left:50%;top:92%;margin-left:-12px;
}
.page-3-1 .img_7 {height:auto;width:248px;position:absolute;left:50%;top:43%;margin-left:-124px;
}
.page-3-2 .img_1 {height:auto;width:296px;position:absolute;left:50%;top:5%;margin-left:-148px;
}
.page-3-2 .img_2 {height:auto;width:260px;position:absolute;left:50%;top:75%;margin-left:-130px;
}
.page-3-2 .img_3 {height:auto;width:20px;position:absolute;left:50%;top:87%;margin-left:-10px;
}
.page-3-2 .img_6 {height:auto;width:25px;position:absolute;left:50%;top:92%;margin-left:-12px;
}
.page-4-1 .img_1 {height:auto;width:162px;position:absolute;left:50%;top:2%;margin-left:-84px;z-index:2;
}
.page-4-1 .img_2 {height:auto;width:230px;position:absolute;left:50%;top:28%;margin-left:-115px;
}
.page-4-1 .img_3 {height:auto;width:161px;position:absolute;left:50%;top:28%;margin-left:-80px;
}
.page-4-1 .img_4 {height:auto;width:20px;position:absolute;left:50%;top:87%;margin-left:-10px;
}
.page-4-1 .img_5 {height:auto;width:142px;position:absolute;left:50%;top:82%;margin-left:-71px;
}
.page-4-1 .img_6 {height:auto;width:25px;position:absolute;left:50%;top:92%;margin-left:-12px;
}
.page-4-1 .img_7 {height:auto;width:271px;position:absolute;left:50%;top:33%;margin-left:-135px;
}
.page-4-1 .img_8 {height:auto;width:169px;position:absolute;left:50%;top:75%;margin-left:-84px;
}
.page-4-2 .img_1 {height:auto;width:298px;position:absolute;left:50%;top:5%;margin-left:-149px;
}
.page-4-2 .img_2 {height:auto;width:260px;position:absolute;left:50%;top:75%;margin-left:-130px;
}
.page-4-2 .img_3 {height:auto;width:20px;position:absolute;left:50%;top:87%;margin-left:-10px;
}
.page-4-2 .img_6 {height:auto;width:25px;position:absolute;left:50%;top:92%;margin-left:-12px;
}
.page-5-1 .img_1 {height:auto;width:280px;position:absolute;left:50%;top:20%;margin-left:-140px;
}
.page-5-1 .img_2 {height:auto;width:260px;position:absolute;left:50%;top:67%;margin-left:-130px;
}
animation.css
/*定义四个方向的动画*/.pt-page-moveToLeft {-webkit-animation: moveToLeft .6s ease both;animation: moveToLeft .6s ease both;
}.pt-page-moveFromLeft {-webkit-animation: moveFromLeft .6s ease both;animation: moveFromLeft .6s ease both;
}.pt-page-moveToRight {-webkit-animation: moveToRight .6s ease both;animation: moveToRight .6s ease both;
}.pt-page-moveFromRight {-webkit-animation: moveFromRight .6s ease both;animation: moveFromRight .6s ease both;
}.pt-page-moveToTop {-webkit-animation: moveToTop .6s ease both;animation: moveToTop .6s ease both;
}.pt-page-moveFromTop {-webkit-animation: moveFromTop .6s ease both;animation: moveFromTop .6s ease both;
}.pt-page-moveToBottom {-webkit-animation: moveToBottom .6s ease both;animation: moveToBottom .6s ease both;
}.pt-page-moveFromBottom {-webkit-animation: moveFromBottom .6s ease both;animation: moveFromBottom .6s ease both;
}
/*定义四个方向动画的实现过程*/@-webkit-keyframes moveToLeft {from { }to { -webkit-transform: translateX(-100%); }
}
@keyframes moveToLeft {from {}to { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
}@-webkit-keyframes moveFromLeft {from { -webkit-transform: translateX(-100%); }
}
@keyframes moveFromLeft {from { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
}@-webkit-keyframes moveToRight { from { }to { -webkit-transform: translateX(100%); }
}
@keyframes moveToRight { from { }to { -webkit-transform: translateX(100%); transform: translateX(100%); }
}@-webkit-keyframes moveFromRight {from { -webkit-transform: translateX(100%); }
}
@keyframes moveFromRight {from { -webkit-transform: translateX(100%); transform: translateX(100%); }
}@-webkit-keyframes moveToTop {from { }to { -webkit-transform: translateY(-100%); }
}
@keyframes moveToTop {from { }to { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
}@-webkit-keyframes moveFromTop {from { -webkit-transform: translateY(-100%); }
}
@keyframes moveFromTop {from { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
}@-webkit-keyframes moveToBottom {from { }to { -webkit-transform: translateY(100%); }
}
@keyframes moveToBottom {from { }to { -webkit-transform: translateY(100%); transform: translateY(100%); }
}@-webkit-keyframes moveFromBottom {from { -webkit-transform: translateY(100%); }
}
@keyframes moveFromBottom {from { -webkit-transform: translateY(100%); transform: translateY(100%); }
}/*iconUp*/
.pt-page-moveIconUp {animation: moveIconUp ease 1.5s both infinite;
}@keyframes moveIconUp {0% { -webkit-transform: translateY(100%); transform: translateY(100%); opacity:0;}50% { -webkit-transform: translateY(0%); transform: translateY(0%); opacity:1;}100% { -webkit-transform: translateY(-100%); transform: translateY(-100%); opacity:0;}
}/*moveCircle*/
.pt-page-moveCircle{animation: moveCircle 1.2s ease-in-out;
}@-webkit-keyframes moveCircle{0%{transform: translateY(-80%);opacity: 0.1;}5%{transform: translateY(-80%);opacity: 0.3;}35%{transform: translateY(10%);opacity: 0.8;}60%{transform: translateY(-30%);opacity: 0.8;}65%{transform: translateY(-20%);opacity: 0.8;}100%{transform: translateY(0%);opacity: 1;}
}
/*scaleUp*/
.pt-page-scaleUp{animation:scaleUp 0.6s ease;
}@-webkit-keyframes scaleUp{from{transform: scale(0.4);}to{}
}
/*flipInLeft*/
.pt-page-flipInLeft{transform-origin: 50% 50%;animation: flipInLeft .5s both ease-out;
}
@-webkit-keyframes flipInLeft{from { -webkit-transform:rotateY(-90deg); opacity: 0.2; }
}/*定义page-5-1*/
.pt-page-rotateCubeBottomIn{animation:rotateCubeBottomIn .6s ease-in both ;transform-origin: 50% 100%;
}@keyframes rotateCubeBottomIn {0%{transform: translateY(-100%) rotateX(90deg);opacity: 0.3}50%{animation-timing-function: ease-out; transform: translateY(-50%) translateZ(-200px) rotateX(45deg);}
}.pt-page-rotateCubeTopIn{animation: rotateCubeTopIn 0.6s ease both;transform-origin: 100% 50%;
}@keyframes rotateCubeTopIn {0%{translateY(100%) rotateX(-90deg);opacity: 0.3}50%{animation-timing-function: ease-out;transform:translateY(50%) translateZ(-200px) rotateX(-45deg) ;}
}reset.css
* {margin: 0;padding: 0;outline: none;
}
*:not(input,textarea) {-webkit-touch-callout: inherit;-webkit-user-select: auto;
}
body {width: 100%;font-family: Hiragino Sans GB, Arial, Helvetica, "����", sans-serif;font-size: 14px;color: #878787;-webkit-touch-callout: inherit ;-webkit-user-select: auto ;background-color: #fff;
}
a {color: #878787;text-decoration: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
a:hover {text-decoration: none;
}
button,input,select,textarea {font-size: 100%;margin: 0;padding: 0;outline: none;
}
dt,dd {display: inline-block;
}
textarea,input {resize: none;outline: none;
}
textarea {resize: none;-webkit-appearance: none;
}
ul,ol,li {list-style: none;
}
em {font-style: normal;
}index.js
/*** Created by zhiyongYan on 2017/3/6.*/
$(function () {//初始化坐标变量var last = {row:0,col:0};var now = {row:1,col:1};//初始化四个方向变量var direction = {up:1,right:2,down:3,left:4};//初始化是否移动变量var isMoving = false;//向上滑动$(document).swipeUp(function () {if(isMoving){return;}//将滑动前手指作用的页面的坐标赋值给滑动之后上一个页面last.row = now.row;last.col = now.col;//判断滑动的条件 滑动所需参数的设置if(last.col!=5){now.row = 1;now.col = last.col + 1;pageMove(direction.up);}});//向下滑动$(document).swipeDown(function () {if(isMoving){return;}//将滑动前手指作用的页面的坐标赋值给滑动之后上一个页面last.row = now.row;last.col = now.col;//判断滑动的条件 滑动所需参数的设置if(last.col!=1){now.row = 1;now.col = last.col - 1;pageMove(direction.down);}});//向左滑动$(document).swipeLeft(function () {if(isMoving){return;}//将滑动前手指作用的页面的坐标赋值给滑动之后上一个页面last.row = now.row;last.col = now.col;//判断滑动的条件 滑动所需参数的设置if(last.col>1&&last.col<5&&last.row==1){now.row = last.row + 1;pageMove(direction.left);}});//向右滑动$(document).swipeRight(function () {if(isMoving){return;}//将滑动前手指作用的页面的坐标赋值给滑动之后上一个页面last.row = now.row;last.col = now.col;//判断滑动的条件 滑动所需参数的设置if(last.col>1&&last.col<5&&last.row==2){now.row = last.row - 1;pageMove(direction.right);}});//定义move函数function pageMove(dir) {//初始化作用的两个页面var lastPage = '.page-' + last.col + '-' + last.row;var nowPage = '.page-' + now.col + '-' + now.row;//初始化页面类var outClass = '';var inClass = '';//匹配方向switch (dir){case direction.up:outClass = 'pt-page-moveToTop';inClass = 'pt-page-moveFromBottom';break;case direction.right:outClass = 'pt-page-moveToRight';inClass = 'pt-page-moveFromLeft';break;case direction.down:outClass = 'pt-page-moveToBottom';inClass = 'pt-page-moveFromTop';break;case direction.left:outClass = 'pt-page-moveToLeft';inClass = 'pt-page-moveFromRight';break;}//为页面添加动画开始的类$(nowPage).removeClass('hide');$(lastPage).addClass(outClass);$(nowPage).addClass(inClass);isMoving = true;//处理动画完成时页面的类setTimeout(function () {$(lastPage).addClass('hide');$(lastPage).removeClass(outClass);$(lastPage).removeClass('page-current');$(lastPage).find('img').addClass('hide');$(nowPage).addClass('page-current');$(nowPage).removeClass(inClass);$(nowPage).find('img').removeClass('hide');isMoving = false;},600);}
});<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>_zepto实战</title><link rel="stylesheet" type="text/css" href="css/reset.css"/><link rel="stylesheet" type="text/css" href="css/index.css"/><link rel="stylesheet" type="text/css" href="css/animation.css"/></head><body><div id="container"><div class="page page-1-1 page-current"><img class="img_1 pt-page-moveFromTop" src="img/cover.png" alt="" /><img class="img_2 pt-page-moveFromLeft" src="img/wording_cover.png" alt="" /><img class="img_3 common_img pt-page-moveIconUp" src="img/icon_up.png" alt="" /></div><div class="page page-2-1 hide"><img class="img_1 hide pt-page-moveFromBottom" src="img/wording.png" /><img class="img_2 hide pt-page-moveCircle" src="img/circle.png" /><img class="img_3 hide pt-page-moveFromLeft" src="img/people.png" /><img class="img_4 hide pt-page-scaleUp" src="img/dot1.png" /><img class="img_5 hide pt-page-scaleUp" src="img/check_develop.png" /><img class="img_6 hide common_img pt-page-moveIconUp" src="img/icon_up.png" /><img class="img_7 hide pt-page-scaleUp" src="img/floating_develop.png" /></div><div class="page page-2-2 hide"><img class="img_1 hide pt-page-flipInLeft" src="img/introduction.png" /><img class="img_2 hide pt-page-flipInLeft" src="img/btn_develop.png" /><img class="img_3 hide pt-page-flipInLeft" src="img/dot2.png" /><img class="img_6 hide common_img pt-page-moveIconUp" src="img/icon_up.png" /></div><div class="page page-3-1 hide"><img class="img_1 hide pt-page-moveFromBottom" src="img/wording_design.png" /><img class="img_2 hide pt-page-moveCircle" src="img/circle-design.png" /><img class="img_3 pt-page-moveFromBottom hide" src="img/people_design.png" /><img class="img_4 hide pt-page-scaleUp" src="img/dot1.png" /><img class="img_5 hide pt-page-scaleUp" src="img/check_design.png" /><img class="img_6 hide common_img pt-page-moveIconUp" src="img/icon_up.png" /><img class="img_7 hide pt-page-scaleUp" src="img/floating_design.png" /></div><div class="page page-3-2 hide"><img class="img_1 hide pt-page-flipInLeft" src="img/introduction_design.png" /><img class="img_2 hide pt-page-flipInLeft" src="img/btn_design.png" /><img class="img_3 hide pt-page-flipInLeft" src="img/dot2.png" /><img class="img_6 hide common_img pt-page-moveIconUp" src="img/icon_up.png" /></div><div class="page page-4-1 hide"><img class="img_1 hide pt-page-moveFromBottom" src="img/wording_production.png" /><img class="img_2 hide pt-page-moveCircle" src="img/circle-production.png" /><img class="img_3 pt-page-moveFromRight hide" src="img/people_production.png" /><img class="img_4 hide pt-page-scaleUp" src="img/dot1.png" /><img class="img_5 hide pt-page-scaleUp" src="img/check_production.png" /><img class="img_6 hide common_img pt-page-moveIconUp" src="img/icon_up.png" /><img class="img_7 hide pt-page-scaleUp" src="img/floating_production.png" /><img class="img_8 hide pt-page-scaleUp" src="img/pic_shadow_production.png" /></div><div class="page page-4-2 hide"><img class="img_1 hide pt-page-flipInLeft" src="img/introduction_production.png" /><img class="img_2 hide pt-page-flipInLeft" src="img/btn_production.png" /><img class="img_3 hide pt-page-flipInLeft" src="img/dot2.png" /><img class="img_6 hide common_img pt-page-moveIconUp" src="img/icon_up.png" /></div><div class="page page-5-1 hide"><img class="img_1 hide pt-page-rotateCubeBottomIn" src="img/pic_back.png" /><img class="img_2 hide pt-page-rotateCubeTopIn" src="img/btn_join.png" /></div></div><script src="js/zepto.js" type="text/javascript" charset="utf-8"></script><script src="js/touch.js" type="text/javascript" charset="utf-8"></script><script src="js/index.js" type="text/javascript" charset="utf-8"></script></body>
</html>
zepto.js学习笔记02相关推荐
- Vue.js学习笔记 02、Vue组件篇笔记
文章目录 前言 一.全局组件 子组件应用 组件优点:组件的可复用性 全局组件缺点描述 二.局部组件 创建与注册局部组件(认识components属性) 局部组件的默认规定(组件名称首字母全都大写) 三 ...
- JavaWeb-综合案例(用户信息)-学习笔记02【登录功能】
Java后端 学习路线 笔记汇总表[黑马程序员] JavaWeb-综合案例(用户信息)-学习笔记01[列表查询] JavaWeb-综合案例(用户信息)-学习笔记02[登录功能] JavaWeb-综合案 ...
- Tomcat学习笔记02【Tomcat部署项目】
Java后端 学习路线 笔记汇总表[黑马程序员] Tomcat学习笔记01[Web相关概念.Tomcat基本操作][day01] Tomcat学习笔记02[Tomcat部署项目][day01] 目录 ...
- Bootstrap学习笔记02【全局CSS样式、组件和插件、案例_黑马旅游网_首页】
Java后端 学习路线 笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...
- JavaScript学习笔记02【基础——对象（Function、Array、Date、Math）】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
- WebGL three.js学习笔记 6种类型的纹理介绍及应用
WebGL three.js学习笔记 6种类型的纹理介绍及应用 本文所使用到的demo演示: 高光贴图Demo演示 反光效果Demo演示(因为是加载的模型,所以速度会慢) (一)普通纹理 计算机图形学 ...
- RN学习笔记02：利用WebStorm创建RN项目
RN学习笔记02:利用WebStorm创建RN项目 在RN学习笔记01里,安装了node.js与react-native-cli,而且配置了环境变量. 在命令行环境,利用react-native in ...
- ArcGIS JS 学习笔记4 实现地图联动
原文:ArcGIS JS 学习笔记4 实现地图联动 1.开篇 守望屁股实在太好玩了,所以最近有点懒,这次就先写个简单的来凑一下数.这次我的模仿目标是天地图的地图联动. 天地的地图联动不仅地图有联动,而 ...
- backbone.js学习笔记
backbone.js学习笔记 之前只接触过jQuery,看来Backbone是除了jQuery的第二大JS框架... backbone到底是个啥? 其实刚开始我也不知道=_=,我是这周二才听说居然还 ...
- node.js学习笔记
# node.js学习笔记标签(空格分隔): node.js---## 一 内置模块学习 ### 1. http 模块 ``` //1 导入http模块 const http =require('ht ...
最新文章
- C/C++包管理工具Conan简介
- Qt Quick中的The Visual Canvas
- apache重写规则转Nginx
- 智慧交通day04-特定目标车辆追踪03：siamese在目标跟踪中的应用-SiamFC(2016)
- spring boot整合shiro继承redis_Springboot+Shiro+redis整合
- 云熙板式家具参数化拆单软件免锁版_数控开料机拆单软件如何选择？
- linux做 tar,linux的tar命令
- python的数字类型有哪些子类型_PYTHON-基本数据类型-数字类型，字符串类型，列表类型-练习...
- fatal error LNK1169: one or more multiply defined symbols found
- 高效使用使用SQL缓存依赖
- 122. PHP 性能问题(3)
- 全网首发：把一个bit数组矩阵旋转90度
- 0033【MySQL】Mysql备份导入异常：@@GLOBAL.GTID_PURGED can only be set when @@GLOBAL.GTID_EXECUTED is empty
- 系统集成项目管理工程师11《项目风险管理》
- win8 cn_windows_8_x86_dvd_915414.iso 安装密钥
- IMU使用系列------imu_tools验证数据是否准确及安装是否准确
- ipa包发布App Store
- 第三回 无处不在的计算
- 微信开发_Exception_02_errcode:40164,errmsg:invalid ip 61.172.68.219, not in whitelist hint
- 学生管理系统（Java版）