技术文章 | Technical articles

前端_移动端开发

一、移动端的事件

移动端新增了touch”触摸事件,因为手指的行为叫触摸, 而鼠标的行为叫点击

依然支持点击事件,只是有300ms的延迟,为了检测是否双击

 

举例:

// 获取元素

var box = document.getElementById("box");

// 获取当前时间

var date = new Date();

// 绑定click事件

box.onclick = function() {

// 改变文字颜色

this.style.color = "white";

console.log(new Date() - date);

10 }

11 

12 

13 // touchstart事件

14 box.addEventListener("touchstart", function() {

15  // 改变文字颜色

16  this.style.color = "blue";

17  console.log(new Date() - date);

18 })

输出:

图片0.png

这两个数值就是两个事件执行的毫秒值差

 

1.1 移动端的三个事件

移动端添加了触摸事件分别是:

 

触摸开始事件:touchstart

绑定方式:

dom.addEventListner(touchstart, function() {

 console.log(触摸开始)

} )

 

结果:

图片1.png

 

触摸移动事件:touchmove

绑定方式:

// touchmove

box.addEventListener("touchmove", function() {

console.log("触摸中");

})

 

结果:

图片2.png

 

触摸结束事件: touchend

绑定方式:

// touchend

box.addEventListener("touchend", function() {

console.log("触摸结束");

})

结果:

图片3.png

 

 

1.2 事件对象

图片4.png

 

touchstarttouchmove可以通过e.touches来获取手指相关信息

 

// touchstart

box.addEventListener("touchstart", function(e) {

// console.log(e);

// 查看手指相关信息

console.log(e.touches[0].clientX);

console.log(e.touches[0].clientY);

})

输出:

图片5.png

 

touchmove:

// touchmove

box.addEventListener("touchmove", function(e) {

// console.log(e);

console.log(e.touches[0].clientX);

})

输出:

图片6.png

 

touchend获取手指想关信息的属性通过e.changedTouches来获取

 

// // touchend

box.addEventListener("touchend", function(e) {

// 查找手指相关信息

// console.log(e);

 console.log(e.changedTouches[0].clientX);

 console.log(e.changedTouches[0].clientY);

})

输出:

图片7.png

 

下午复习:

移动端的事件:

touchstart: 触摸开始事件

touchmove:触摸移动事件

touchend: 触摸结束事件

 

事件对象:

获取手指相关信息

touchstarttouchmove 中 可以通过e.touches 来获取手指的位置

touchend事件中,获取手指信息不是通过e.touches而是通过e.changedTouches来获取

 

二、过度事件和动画事件

 当一个元素过度完成之后,会触发一个事件: 过度完成事件

 

举例:

// 过度事件

box.addEventListener("transitionend", function() {

console.log("过度完成");

})

 

图片8.png 

 

2.1 动画事件

当一个元素动画执行的时候会触发两个事件:

 

DOM结构:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

* {

 margin: 0;

 padding: 0;

10  }

11  #box {

12   position: absolute;

13   width: 100px;

14   height: 100px;

15   background-color: red;

16   left: 0;

17   top: 0;

18   animation: go 1s linear 0s 3 alternate;

19  }

20  @keyframes go {

21   from {

22    left: 0;

23   }

24   to {

25    left: 100px;

26   }

27  }

28 

29 </style>

30 </head>

31 <body>

 

动画开始:

// 动画开始

box.addEventListener("animationstart", function() {

console.log("动画开始了");

})

 

动画结束:

// 动画结束

box.addEventListener("animationend", function() {

console.log("动画结束了");

})

图片9.png 

 

三、zepto

Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api。 如果你会用jquery,那么你也会用zepto。

官网: http://www.css88.com/doc/zeptojs_api/

下载:http://zeptojs.com/zepto.min.js

zepto是模块化:如果想要使用animate函数 必须下载fx模块, 如果需要使用移动端的事件必须下载touch模块

图片10.png 

3.1 模块化

zepto天生不具备animate函数,如果想要使用需要下载fx模块

在没有下载之前:

图片11.png

zepto.js:

图片12.png

 

在下载fx模块之后:

图片13.png

 

zepto.js:

图片14.png

 

3.2 touch模块

touch模块添加了一些自定义的事件:

tap: 触碰

doubleTap: 双击

singleTap: 单击

longTap: 长按 750ms之后执行

swipe: 滑动

swipeLeft: 左滑

swipeRight: 右滑

swipeUp: 上滑

swipeDown: 下滑

 

四、百度地图

自学方式

假如在工作中领导交给我们一个任务, 在页面中显示地图并显示自己公司的位置

既然是要显示地图,就要找对应的地图api,

现成的地图有: 百度地图, 高德地图, 谷歌地图

1

图片15.png 

 

点击:

图片16.png 

 

3

图片17.png

 

4

图片18.png 

5

图片19.png 

6

图片20.png 

 

7

图片21.png 

 

8:创建完成之后

图片22.png 

 

有了密钥之后我们就可以开发了

按照demo提示

 

9

图片23.png




扫描下方二维码添加微信:haomei0452,领取 前端资料、项目实战视频教程 !



爱创课堂是一家专门做前端培训的机构,由百度高级工程师,《JavaScript设计模式》作者张容铭老师亲自授课,全程20个项目实战,真正做到学习完即可到企业正常工作!

 
我们前端课程的五大优势:

 
1. 名师亲自授课,根据企业需求 实时跟进课程大纲,保证学员学到的都是最新的、企业最需要的前端知识点
 
2. 采取小班教学、上二休一的模式(一个班20—30人,保证老师可以照顾到每一位同学,学员有充足的时间练习

3. 签订就业协议,帮助学员制作简历,投递简历,模拟面试,不用担心就业问题,目前学员平均就业薪资12K

4. 免费学习一周,不满意不收取任何费用

5. 与中国石油,中国电信,软通等知名企业合作,进行企业内训,并进行学员就业推荐

 


上一篇文章: 前端_模块化开发(下)
下一篇文章: web前端_css 3d了解一下【爱创课堂专业前端培训】
更多详细内容请访问爱创官网首页:http://www.icketang.com/

最新发布 | 这里有最新的文章查看更多>>

爱创推荐 | 这里有推荐的文章查看更多>>