您的位置:首页 >> 教育 >> 计算机 >> 最新移动端交互开发入门到精通全套视频教程
最新移动端交互开发入门到精通全套视频教程
发布用户 57908561
添加日期 2019/2/8 16:16:43
大  小 43 字节
最后更新 2019/2/8 17:03:16
标  签 PHP工程师,Web前端工程师,Java工程师,Android工程师,Python工程师
喜  欢
分  享
eD2k链接
下面是用户共享的文件列表,可以使用迅雷、QQ旋风等软件进行下载,点击文件名进行下载
下载地址.txt 43 字节
43 字节
最新移动端交互开发入门到精通
在移动设备中,几乎所有的操作都和触摸有关,而基于这一特性,近年来在移动端中也兴起了一些较为特别的交互方式。用手指在屏幕上“刮奖”就是其中的一个非常典型的例子,它不仅需要前端设计师能够熟悉触摸手势的控制方法,还需要设计师掌握一定的图像处理技巧。接下来我们就将通过制作一个简单的刮奖案例,来了解HTML5中触摸操作的相关知识。1. 触摸交互操作基础——Touch与Click的区别

在移动设备上,人们的交互方式不再是键盘和鼠标,而是手指。因此,对应的移动端页面的交互方式也会与桌面端有所不同。

在桌面端,为某个提交按钮制作点击功能,可以使用如下的JavaScript代码:

var submit = document.getElementById("submit");submit.onclick = function(){ // 功能代码};

以上代码使用了onclick事件来对应鼠标的点击行为。然而,在iPhone这样的移动端测试时,我们会发现onclick事件有大约半秒的延迟,这是因为iOS系统需要等待一段时间来判断用户是点击还是拖动。要使得用户在移动端的交互更为流畅,则需要使用到Touch事件,使页面得知用户的交互行为不是一次点击,而是一次“触摸”。代码如下:

submit.addEventListener("touchstart", submitForm);function submitForm(){ // 功能代码}

以上代码使用了addEventListener方法为submit元素注册了事件侦听,侦听的事件为touchstart,触发的函数为submitForm()。也就是说,当用户在移动设备中触摸这个submit按钮时,就会触发按钮的touchstart事件,并执行submitForm函数。

在触发touchstart事件时,也会同时产生一个event对象,在这个对象中包括了触摸行为的各种信息,如我们可以用以下代码输出触摸点的个数:

function submitForm(event){ submit.innerHTML = "触摸点个数为" + event.touches.length;}

我们也可以获取到触摸点的x、y位置属性,其属性名分别为pageX和pageY。以下代码将输出第一个触摸点的x坐标:

function submitForm(event){ submit.innerHTML = "第一个触摸点的X位置" + event.touches[0].pageX;}

除touchstart外,在HTML5中与触摸相关的事件还包括touchmove和touchend,前者是在手指拖曳页面元素的过程中不断触发,而后者是手指从一个页面元素上移开时触发。

除touch事件外,在iOS设备中还提供了gesture事件,即多指操作。可以这么理解,当用户将一根手指放到按钮上时,此时触发了touch,而此时将第二根手指也放到按钮上时,就触发了gesture(手势)事件。我们将在随后的教程中对手势操作进行详细讲解。

在了解了触摸事件基础知识后,接下来,我们将使用touch时间来制作“刮奖”效果。

2. HTML素材准备——准备好HTML代码、必要的CSS样式和素材文件3. 利用触摸事件实现刮奖效果——编写JavaScript代码
4. 案例收尾——一些需要考虑的细节

下载地址:百度网盘下载